jQuery實(shí)現(xiàn)選項(xiàng)卡功能。首先將界面搭建好。

有導(dǎo)航頭tab_menu，還有內(nèi)容tab_box。

要實(shí)現(xiàn)的效果就是，點(diǎn)擊后，將相應(yīng)的內(nèi)容顯示出來，其他內(nèi)容隱藏掉。

同時(shí)為了展現(xiàn)選中狀態(tài)，為選中的項(xiàng)添加背景，以示區(qū)別。

?

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

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

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

?

css部分：

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

待布局完成之后，進(jìn)行jQuery的動(dòng)作：

<script type='text/javascript'> $(function(){//1.點(diǎn)擊時(shí)改變css屬性，移除之前的selected選項(xiàng)，添加新的selected選項(xiàng)//2.隱藏之前的div層，顯示對(duì)應(yīng)得div層//為導(dǎo)航中的li注冊(cè)點(diǎn)擊事件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=='時(shí)事'){$('.tab_box div:contains("時(shí)事")').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代碼，我的思路是，點(diǎn)擊選項(xiàng)卡時(shí)，添加selected樣式，同時(shí)移除兄弟選項(xiàng)卡的selected樣式。

再一個(gè)，如何才能觸發(fā)相應(yīng)的tab_box中的內(nèi)容的隱藏與顯示呢？

我發(fā)現(xiàn)了他們有相對(duì)應(yīng)的內(nèi)容，就是選項(xiàng)頭為“實(shí)事”的對(duì)應(yīng)的選項(xiàng)體也為“實(shí)事”，選項(xiàng)頭為“體育”的對(duì)應(yīng)的選項(xiàng)提也為“體育”等。

我就想，先獲取選項(xiàng)頭的內(nèi)容，做出判斷，當(dāng)它為不同的值時(shí)，就觸發(fā)不同的效果。

?

效果是實(shí)現(xiàn)了，可是漏洞很明顯，因?yàn)椴⒉皇撬械倪x項(xiàng)卡都是標(biāo)題與內(nèi)容體相對(duì)應(yīng)。

?

再看看下面的代碼：

<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ì)引起錯(cuò)誤。如果里面還有div .eq(index).show() //顯示 <li>元素對(duì)應(yīng)的<div>元素.siblings().hide(); //隱藏其它幾個(gè)同輩的<div>元素 })}) //]]> </script>

這里的處理就特別的巧妙，它通過獲取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)效果。

?

通過這次練習(xí)，我覺得，自己先動(dòng)腦子想一想還是很好的。可以發(fā)現(xiàn)思路的差異，才能夠發(fā)現(xiàn)不足，知道差距。有時(shí)候甚至你的思路會(huì)更好呢！

本文轉(zhuǎn)自TBHacker博客園博客，原文鏈接：http://www.cnblogs.com/jiqing9006/archive/2012/09/27/2705805.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

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

總結(jié)

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

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