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

<div class="tab"><div class="tab_menu"><ul><li class="selected">時(shí)事</li><li>體育</li><li>娛樂(lè)</li></ul></div><div class="tab_box"> <div>時(shí)事</div><div class="hide">體育</div><div class="hide">娛樂(lè)</div></div> </div>

html中，需要一個(gè)大的div，里面有兩個(gè)子div，一個(gè)作為導(dǎo)航頭tab_menu，一個(gè)作為內(nèi)容體tab_box。css代碼負(fù)責(zé)布局html內(nèi)容。

?

再看看下面的代碼：

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

這里的處理就特別的巧妙，它通過(guò)獲取li的索引，對(duì)選項(xiàng)體進(jìn)行處理。它巧妙的利用了一個(gè)隱藏的對(duì)應(yīng)關(guān)系，就是索引值。

?

這樣即便選項(xiàng)頭與選項(xiàng)體內(nèi)容不對(duì)應(yīng)，一樣可以實(shí)現(xiàn)聯(lián)動(dòng)效果。

轉(zhuǎn)載于:https://www.cnblogs.com/qshting/p/5124679.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。