這個功能在現在的網站中使用較為普遍，就是以選項卡的形式來對一些內容做了分類。，比如下面的天貓商城。
下面的源碼是仿照天貓寫的一個選項卡，實現起來的效果如下。
主要是利用我們在點擊相應板塊是觸發它的單擊事件，在單擊事件中再對內容顯示框(tabbox)進行相應項的顯示和隱藏操作。
同時利用hover為其添加了鼠標滑過時的效果。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <link href="css/style1.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js"></script> <title></title> <script> $(function () { var $div_li = $("div.tab_menu ul li"); $div_li.click(function () { //定義了tan_menu對應的單擊事件，也就是類別的單擊事件。 $(this).addClass("selected") .siblings().removeClass("selected"); var index = $div_li.index(this); $("div.tab_box>div").eq(index).show() .siblings().hide(); }).hover(function () { //定義了鼠標滑過特效 $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); }); </script> </head> <body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">時事</li> <li>體育</li> <li>娛樂</li> </ul> </div> <div class="tab_box"> <div>時事</div> <div class="hide">體育</div> <div class="hide">娛樂</div> </div> </div> </body> </html>