Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JQuery TAB</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript">$ (Function () {$ ('. tabTitle li '). mouseover (function () {$ (this ). addClass ("tabin "). siblings (). removeClass (); $ (". tabContent> ul "). eq ($ (". tabTitle li "). index (this )). show (). siblings (). hide ();});});</script><style type="text/css">Ul, li {list-style: none; margin: 0; padding: 0 ;}. tab {border: 1px solid #000; border-top: 0; width: 240px; margin: 100px ;}. tabTitle {color: #666; font-size: 14px; font-weight: bold; overflow: hidden; zoom: 1 ;}. tabTitle li {float: left; width: 80px; height: 28px; line-height: 28px; text-align: center; border: 1px solid #000; border-right: 0; margin-left:-1px ;}. tabTitle li. tabin {border-bottom: 0 none; height: 29px; background: # eee ;}. hide {display: none ;}. tabContent {background: # eee ;}</style></head><body><div class="tab"><div class="tabTitle"><ul><li class="tabin">Daily recommendation</li><li>Recommended this week</li><li>Recommended this month</li></ul></div><div class="tabContent"><ul><li>Latest Comment 1</li><li>Latest Comment 2</li><li>Latest comment 3</li></ul><ul class="hide"><li>Recent Review 1</li><li>Recent hot comments 2</li><li>Recent hot comments 3</li></ul><ul class="hide"><li>Random article 1</li><li>Random article 2</li><li>Random article 3</li></ul></div></div><div class="tab"><div class="tabTitle"><ul><li class="tabin">Daily recommendation</li><li>Recommended this week</li><li>Recommended this month</li></ul></div><div class="tabContent"><ul><li>Latest Comment 1</li><li>Latest Comment 2</li><li>Latest comment 3</li></ul><ul class="hide"><li>Recent Review 1</li><li>Recent hot comments 2</li><li>Recent hot comments 3</li></ul><ul class="hide"><li>Random article 1</li><li>Random article 2</li><li>Random article 3</li></ul></div></div></body></html></td> </tr></table>
Tip: you can modify some code before running
