多层选项卡嵌套 , js选项卡tab , jquery选项卡
2016-09-05 12:12
525 查看
思路
三层选项卡嵌套,分别为box1,box2,box3,让他们都display:none;当鼠标选中某卡标题时,为其添加class:active,并令对应的box显示,同级其他标题删除active,box内容隐藏。默认选中哪个,就让哪个标题active内容display:block 。效果图
代码即粘即用哦
jquery
<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>
html
<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>
css
<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; /*让box都隐藏*/ border:1px solid #0495ff; margin-top:-1px; padding: 20px 0; } </style>
如果您有更好的建议或有什么问题,欢迎留言…………^.^
相关文章推荐
- js和jquery实现tab选项卡
- js 多层叠的TAB选项卡
- tytabs.jquery.min.js实例,渐变的TAB选项卡特效
- jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
- jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
- 【JS】可多次使用的jQuery tab选项卡
- 基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
- js 多层叠的TAB选项卡
- 选项卡插件jquery.tab.js和不用js写选项卡
- [原] 基于jQuery的自动TAB选项卡实现
- js jquery tab,鼠标悬浮等特效 搜集以后备用......
- 用Jquery写的tab选项卡效果
- CSS+JS 仿MSN TAB选项卡
- 纯php打造的tab选项卡效果代码(不用js)
- js面向对象 实现 tab选项卡效果
- jquery写的一个TabControl类,动态创建选项卡切换Tab
- 6个出色的基于JQuery的Tab选项卡实例
- Jquery 实现Tab效果 思路是js思路
- 基于jquery的tab切换 js原理