jQuery之選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)
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; //將文字居中
list-style:none; //去除標(biāo)記符號(hào)
background:#F1F1F1; //設(shè)置默認(rèn)背景色
border:1px solid #898989; //設(shè)置邊框色
margin-right:4px; //每個(gè)li之間的距離為4px
cursor: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è)置高度為100px
border:1px solid #898989; //設(shè)置內(nèi)容體的邊框樣式
}
.hide{//隱藏需要隱藏的內(nèi)容div
display: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)腦子想一想還是很好的??梢园l(fā)現(xiàn)思路的差異,才能夠發(fā)現(xiàn)不足,知道差距。有時(shí)候甚至你的思路會(huì)更好呢!
- jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作詳解
- jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
- JQueryDOM之樣式操作
- JQuery調(diào)用綁定click事件的3種寫法
- jQuery中click事件的定義和用法
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- Jquery為DIV添加click事件的簡(jiǎn)單實(shí)例
- jQuery實(shí)現(xiàn)選項(xiàng)卡切換效果簡(jiǎn)單演示
- JQuery Tab選項(xiàng)卡效果代碼改進(jìn)版
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
相關(guān)文章
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù),有需要的朋友可以參考一下2013-11-11jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV功能
這篇文章主要介紹了jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV的相關(guān)資料,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11jquery利用json實(shí)現(xiàn)頁面之間傳值的實(shí)例解析
本文主要介紹了jquery利用json實(shí)現(xiàn)頁面之間傳值的方法,具有很好的參考價(jià)值,需要的朋友可以看下2016-12-12jQuery自適應(yīng)輪播圖插件Swiper用法示例
這篇文章主要介紹了jQuery自適應(yīng)輪播圖插件Swiper用法,結(jié)合實(shí)例形式分析了jQuery輪播圖插件的功能與具體使用方法,需要的朋友可以參考下2016-08-08使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問題
這篇文章主要介紹了使用jQuery不判斷瀏覽器高度解決iframe自適應(yīng)高度問題,需要的朋友可以參考下2014-12-12用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了用jQuery旋轉(zhuǎn)插件jqueryrotate制作轉(zhuǎn)盤抽獎(jiǎng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02