提示：您可以先修改部分代碼再運行
<!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> <title>網頁選項卡應用</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> </script> <style type="text/css"> body{font-size:13px} ul,li {margin:0;padding:0;list-style:none} #menu li {text-align:center;float:left;padding:5px; margin-right:2px;width:50px;cursor:pointer} #menu li.tabFocus {width:50px; font-weight:bold; background-color:#f3f2e7;border:solid 1px #666; border-bottom:0;z-index:100;position:relative} #content {width:260px;height:80px;padding:10px; background-color:#f3f2e7;clear:left; border:solid 1px #666;position:relative;top:-1px} #content li{display:none} #content li.conFocus{display:block} </style> <script type="text/javascript"> $(function() { $("#menu li").each(function(index) { //帶參數遍曆各個選項卡 $(this).click(function() { //註冊每個選卡的單擊事件 $("#menu li.tabFocus").removeClass("tabFocus"); //移除已選中的樣式 $(this).addClass("tabFocus"); //增加當前選中項的樣式 //顯示選項卡對應的內容並隱藏未被選中的內容 $("#content li:eq(" + index + ")").show() .siblings().hide(); }); }); }) </script></head><body> <ul id="menu"> <li class="tabFocus">家居</li> <li>電器</li> <li>二手</li> </ul> <ul id="content"> <li class="conFocus">我是家居的內容</li> <li>歡迎您來到電器城</li> <li>二手市場，產品豐富多彩</li> </ul></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
