基于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中的$(document).ready()使用小結(jié)
本篇文章主要是對(duì)jquery中的$(document).ready()使用方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
通過(guò)jQuery中基本的動(dòng)畫(huà)方法，能夠輕松地為網(wǎng)頁(yè)添加非常精彩的視覺(jué)效果，給用戶一種全新的體驗(yàn)，本文主要對(duì)jQuery中基本的動(dòng)畫(huà)方法進(jìn)行詳細(xì)介紹，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了jquery向上向下取整適合分頁(yè)查詢及四舍五入,需要的朋友可以參考下2014-09-09
jQuery實(shí)現(xiàn)貪吃蛇小游戲（附源碼下載）
網(wǎng)上關(guān)于JS實(shí)現(xiàn)貪吃蛇的文章有很多，最近閑來(lái)無(wú)事，想著利用jQury來(lái)實(shí)現(xiàn)貪吃蛇小游戲，下面實(shí)現(xiàn)這篇文章主要介紹了利用jQuery實(shí)現(xiàn)貪吃蛇小游戲的方法，文中給出的是吸納思路和示例代碼，需要的朋友可以參考下。2017-03-03
隨著WEB2.0及ajax思想在互聯(lián)網(wǎng)上的快速發(fā)展傳播，陸續(xù)出現(xiàn)了一些優(yōu)秀的Js框架，其中比較著名的有Prototype、YUI、jQuery、mootools、Bindows以及國(guó)內(nèi)的JSVM框架等2011-01-01
jQuery插件實(shí)現(xiàn)的日歷功能示例【附源碼下載】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)的日歷功能,結(jié)合完整實(shí)例形式分析了jQuery datepicker插件實(shí)現(xiàn)日歷功能的相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了jQuery中fadeOut()方法用法,以實(shí)例形式分析了fadeOut()方法的功能、定義及具體使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
這篇文章主要為大家詳細(xì)介紹了Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JQuery+div+css 無(wú)限級(jí)聯(lián)樹(shù)實(shí)現(xiàn)代碼
JQuery+div+css 無(wú)限級(jí)聯(lián)樹(shù)實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03