這一次，我自己寫了代碼，先看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內容。

?

再看看下面的代碼：

<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的索引，對選項體進行處理。它巧妙的利用了一個隱藏的對應關系，就是索引值。

?

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

轉載于:https://www.cnblogs.com/qshting/p/5124679.html

總結

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

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