<html>
<head>
<title>多级tab</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//定义函数
function tab(tabID,box){
$(tabID).click(function(){
$(tabID).removeClass('active'); //先将所有同级去掉active
$(box).hide(); //所有同级box隐藏
$(this).addClass('active'); //当前li显示
$(box).eq($(this).index()).show();
});
}
$(document).ready(function(){
//选项卡
tab("#tab11 li",'.box1');
tab("#tab22 li",'.box2');
tab("#tab33 li",'.box3');
});
</script>
<style type="text/css">
body{font-size:16px;padding:0;margin:0;}
ul,li,dl,dd{list-style:none;padding:0;margin:0;}
.wrap{width:60%;margin:50px auto;}
.tit{text-align:left;margin-top:20px;}
#tab1 li{background: #0495ff none repeat scroll 0 0;border: 1px solid #0495ff;float: left;height: 30px;line-height: 30px;margin-left: -1px;text-align: center;width: 30%;}
#tab1 li.active{border-bottom:1px solid #0495ff;background:#fff;}
.box1,.box2,.box3{width:90%;display:none;border:1px solid #0495ff;margin-top:-1px;padding: 20px 0;}
</style>
</head>
<body>
<div id="tab1" class="wrap">
<!-- 最外层导航 -->
<ul id="tab11">
<li class="active">卡1</li>
<li>卡2</li>
<li>卡3</li>
</ul>
<div class="box1" style="display:block;">
<!-- 默认选中哪个，就让哪个block -->
<div class="tit">第一层</div>
<div id="tab2" class="wrap">
<!-- 第二层导航 -->
<ul id="tab22">
<li class="active">卡1</li>
<!-- 默认选中哪个，就让哪个active -->
<li>卡2</li>
<li>卡3</li>
</ul>
<div class="box2" style="display:block;">
<div class="tit">第二层</div>
<div id="tab3" class="wrap">
<!-- 第三层导航 -->
<ul id="tab33">
<li >卡1</li>
<li class="active">卡2</li>
<li>卡3</li>
</ul>
<div class="box3"><div class="tit">第三层</div>111111111111111111内容内容</div>
<div class="box3" style="display:block;"><div class="tit">第三层</div>222222222222内容内容内容</div>
<div class="box3"><div class="tit">第三层</div>
3333333333333内容内容内容</div>
</div>
</div>
<div class="box2"><div class="tit">第二层</div>222222222222222222222222内容内容</div>
<div class="box2"><div class="tit">第二层</div>33333333333333333333333333内容内容</div>
</div>
</div>
<div class="box1"><div class="tit">第一层</div>222222222222222222内容内容内容</div>
<div class="box1"><div class="tit">第一层</div>333333333333333333333333内容内容</div>
</div>
</body>
<html>
扫一扫
3067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
