基于jquery的9行js輕松實(shí)現(xiàn)tab控件示例
更新時(shí)間：2013年10月12日 11:26:42 作者：
tab控件的實(shí)現(xiàn)方法有很多，在本文為大家詳細(xì)介紹下如何通過(guò)9行js實(shí)現(xiàn)簡(jiǎn)單的tab控件，感興趣的朋友不要錯(cuò)過(guò)
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/**
* 考慮到tab和pane有可能被動(dòng)態(tài)的添加和刪除，
* 所以每次都廢點(diǎn)時(shí)間去查找先前被激活的tab
*/
var tab = function(tabId,activeId){
$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){
$("#"+$("#"+activeId).attr("tar")).css("display","none");
$("#"+activeId).removeAttr("id");
$(this).attr("id",activeId);
$("#"+$(this).attr("tar")).css("display","block");
});
};
</script>
</head>
<style>
li{
border:1px solid #b5e2f3;
border-bottom:0px;
float:left;
width:100px;
height:25px;
margin:0 7px;
background:#F1FEF3;
padding:9px 0 0 0;
text-align:center;
color:#33a3dc;
cursor:pointer;
}
ul{
width:800;
height:36px;
border-bottom:1px solid #b5e2f3;
}
#selected{
background:#FFF!important;
border-bottom:2px solid #FFF!important;
}
ul{margin:-1px;}
#cate1,#cate2, #cate3, #cate4, #cate5{
clear:both;
height:300px;
background:#FFFFFF;
width:800px;
height:100px;
padding:25px;
border:1px solid #b5e2f3;
}
</style>
<body>
<div id="tab">
<ul>
<li tar="cate1" id="selected">1</li>
<li tar="cate2">2</li>
<li tar="cate3">3</li>
<li tar="cate4">4</li>
</ul>
</div>
<div>
<div id="cate1" style="display:block;">
1
</div>
<div id="cate2" style="display:none;">
2
</div>
<div id="cate3" style="display:none;">
3
</div>
<div id="cate4" style="display:none;">
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>
相關(guān)文章
jQuery實(shí)現(xiàn)的placeholder效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的placeholder效果,可實(shí)現(xiàn)輸入框提示文字的功能,并且針對(duì)焦點(diǎn)的情況判定是否顯示,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-08-08
基于BootStrap環(huán)境寫(xiě)jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫(xiě)jQuery tabs插件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
Jquery實(shí)戰(zhàn)_讀書(shū)筆記1—選擇jQuery
近期公司積極組織我們這些開(kāi)發(fā)人員學(xué)習(xí)進(jìn)步，督促我們學(xué)習(xí)更多的技術(shù)來(lái)提高自己。為此我選擇了jQuery作為我學(xué)習(xí)的方向，同時(shí)我也是想將我的學(xué)習(xí)心得分享給大家，以后我會(huì)不斷的更新一系列jQuery方面的學(xué)習(xí)紀(jì)要，幫助大家學(xué)習(xí)。2010-01-01
這篇文章主要給大家介紹jquery事件處理的一些特征，jquery事件命名機(jī)制的相關(guān)知識(shí)，介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了jQuery中$.extend()用法,實(shí)例分析了extend()方法的功能、定義及相關(guān)的使用技巧,需要的朋友可以參考下2015-06-06
jQuery操作CheckBox的方法介紹(選中,取消,取值)
本篇文章主要是對(duì)jQuery操作CheckBox的方法(選中,取消,取值)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
本文給大家介紹如何給Carousel插件添加新的功能，非常方便以后的程序開(kāi)發(fā)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
jQuery實(shí)現(xiàn)Meizu魅族官方網(wǎng)站的導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)Meizu魅族官方網(wǎng)站的導(dǎo)航菜單效果,可實(shí)現(xiàn)導(dǎo)航菜單項(xiàng)鼠標(biāo)滑過(guò)出現(xiàn)下劃線(xiàn)動(dòng)態(tài)跟隨的功能,通過(guò)jQuery插件實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-09-09
基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果
有了jquery一切變的如此簡(jiǎn)單！讓js做的動(dòng)畫(huà)更有動(dòng)感。2010-04-04
jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話(huà)框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出對(duì)話(huà)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02