jQuery實現選項卡功能。首先將界面搭建好。

有導航頭tab_menu，還有內容tab_box。

要實現的效果就是，點擊后，將相應的內容顯示出來，其他內容隱藏掉。

同時為了展現選中狀態，為選中的項添加背景，以示區別。

?

這一次，我自己寫了代碼，先看html部分：

<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>

html中，需要一個大的div，里面有兩個子div，一個作為導航頭tab_menu，一個作為內容體tab_box。css代碼負責布局html內容。

?

css部分：

*{ margin:0; padding:0; } .tab{width:240px;margin:50px;/*border:1px solid;*/ } .tab_menu{clear:both; } .tab_menu li{float:left; //將導航頭左飄text-align:center; //將文字居中list-style:none; //去除標記符號background:#F1F1F1; //設置默認背景色border:1px solid #898989; //設置邊框色margin-right:4px; //每個li之間的距離為4pxcursor:pointer; //鼠標浮上之后，會有小手的標示出現padding:1px 6px; //控制li的內部距離border-bottom:none; } .tab_menu li.hover{background:#DFDFDF; } .tab_menu li.selected{//為選中的選項加背景與顏色color:#FFF; background:#6D84B4; } .tab_box{clear:both; //清楚float效果的影響height:100px; //設置高度為100pxborder:1px solid #898989; //設置內容體的邊框樣式 } .hide{//隱藏需要隱藏的內容divdisplay:none; }

待布局完成之后，進行jQuery的動作：

<script type='text/javascript'> $(function(){//1.點擊時改變css屬性，移除之前的selected選項，添加新的selected選項//2.隱藏之前的div層，顯示對應得div層//為導航中的li注冊點擊事件var $div_li = $(".tab_menu ul li");$div_li.click(function(){$(this).addClass('selected').siblings().removeClass('selected');//var index = $div_li.index(this);//$("div.tab_box > div").eq(index).show().siblings().hide();var text = $(this).text();if(text=='時事'){$('.tab_box div:contains("時事")').removeClass('hide').siblings().addClass('hide');}if(text=='體育'){$('.tab_box div:contains("體育")').removeClass('hide').siblings().addClass('hide');}if(text=='娛樂'){$('.tab_box div:contains("娛樂")').removeClass('hide').siblings().addClass('hide');}}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");}); }); </script>

這是我寫的jQuery代碼，我的思路是，點擊選項卡時，添加selected樣式，同時移除兄弟選項卡的selected樣式。

再一個，如何才能觸發相應的tab_box中的內容的隱藏與顯示呢？

我發現了他們有相對應的內容，就是選項頭為“實事”的對應的選項體也為“實事”，選項頭為“體育”的對應的選項提也為“體育”等。

我就想，先獲取選項頭的內容，做出判斷，當它為不同的值時，就觸發不同的效果。

?

效果是實現了，可是漏洞很明顯，因為并不是所有的選項卡都是標題與內容體相對應。

?

再看看下面的代碼：

<script type="text/javascript" > //<![CDATA[ $(function(){var $div_li =$("div.tab_menu ul li");$div_li.click(function(){$(this).addClass("selected") //當前<li>元素高亮.siblings().removeClass("selected"); //去掉其它同輩<li>元素的高亮var index = $div_li.index(this); // 獲取當前點擊的<li>元素 在 全部li元素中的索引。$("div.tab_box > div") //選取子節點。不選取子節點的話，會引起錯誤。如果里面還有div .eq(index).show() //顯示 <li>元素對應的<div>元素.siblings().hide(); //隱藏其它幾個同輩的<div>元素 })}) //]]> </script>

這里的處理就特別的巧妙，它通過獲取li的索引，對選項體進行處理。它巧妙的利用了一個隱藏的對應關系，就是索引值。

?

這樣即便選項頭與選項體內容不對應，一樣可以實現聯動效果。

?

通過這次練習，我覺得，自己先動腦子想一想還是很好的。可以發現思路的差異，才能夠發現不足，知道差距。有時候甚至你的思路會更好呢！

本文轉自TBHacker博客園博客，原文鏈接：http://www.cnblogs.com/jiqing9006/archive/2012/09/27/2705805.html，如需轉載請自行聯系原作者

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jQuery之选项卡的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。