jquery实现具有嵌套功能的选项卡


Posted in Javascript onFebruary 12, 2016

关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容。
通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容。
代码如下:

<head>
<meta charset="gb2312">
<title>jquery选项卡</title>
<style type="text/css">
body, ul, li, div, a{
 margin:0px;
 padding:0px;
}
body{
 margin-top:10px;
 margin-left:15px;
}
#all{
 border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
 width:255px;
}
#title li{
 float:left;
 list-style:none;
 width:50px;
 border-top:2px solid #f60;
 border-right:1px solid #ccc;
 text-align:center;
 padding-top:3px;
}
#title li:last-child{
 border-right:1px solid #fff;
}
.new{
 border-bottom:1px solid #fff;
 color:#f60;
}
.old{
 border-bottom:1px solid #ccc;
}
#content{
 clear:both;
}
#content ul{
 margin-left:5px;
 list-style:none;
 float:left;
}
#content li{
 width:40px;
 height:30px;
 background-color:#f60;
 text-align:center;
 color:#fff;
}
.inContent{
 width:205px;
 height:90px;
 background-color:#f6c;
 margin-left:50px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
 $("#title li:first").addClass("new").siblings().addClass("old"); 
 $("#content div:first").show().siblings().hide(); 
 $(".inContent:first").show().siblings().hide(); 
 $("#title li").click(function(){ 
  $(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"); 
  $(".info").hide().eq($("#title li").index(this)).show(); 
  $(".info div:first-child").show().siblings().hide(); 
 }); 
 
 $(".info li").mouseover(function(){ 
  $(this).css("color","#20f"); 
  $(".inContent").hide().eq($(".info li").index(this)).show(); 
 }); 
 $(".info li").mouseout(function(){ 
  $(this).css("color","#fff"); 
 });
}); 
</script>
</head>
<body>
<div id="all">
 <div id="title">
  <ul>
   <li>要闻</li>
   <li>国内</li>
   <li>时尚</li>
   <li>旅游</li>
   <li>科技</li>
  </ul>
 </div>
 <div id="content">
  <div style="clear:both;" class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A1</div>
    <div class="inContent">B1</div>
    <div class="inContent">C1</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A2</div>
    <div class="inContent">B2</div>
    <div class="inContent">C2</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A3</div>
    <div class="inContent">B3</div>
    <div class="inContent">C3</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A4</div>
    <div class="inContent">B4</div>
    <div class="inContent">C4</div>
   </div>
  </div>
  <div class="info">
   <ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
   </ul>
   <div>
    <div class="inContent">A5</div>
    <div class="inContent">B5</div>
    <div class="inContent">C5</div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

上面的代码实现了选项卡的嵌套功能,下面介绍一下它的实现过程。
一.实现原理:
原理其实非常的简单,其实就是大的选项卡里面套了一个小的选项卡,先进行大的选项卡的切换,然后再进行小的选项卡的切换,就是这么简单,这里就不多介绍了,具体可以看代码注释。
二.代码注释:
1.$(function(){}),文档结构完全加载完毕再去执行函数中的代码。
2.$("#title li:first").addClass("new").siblings().addClass("old"),在默认状态下,为id属性值为title的元素下第一个li元素添加名为new的class类,然后为其他的兄弟li元素添加old的class类。也就是在默认状态下横向的选项卡第一个字体是红色,其他的都是黑色。
3.$("#content div:first").show().siblings().hide(),将id为content下第一个div设置为显示,其他的兄弟元素隐藏。
4.$(".inContent:first").show().siblings().hide(),将class属性值为inContent的第一个元素设置为显示,兄弟元素隐藏。
5.$("#title li").click(function(){}),为相应的li元素注册click事件处理函数。
6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),如果点击顶部的li元素的话,会为当前li元素添加名为new的class类,然后删除名为old的class类,然后将其他兄弟元素添加名为old的class类,删除名为new的class类。
7.$(".info").hide().eq($("#title li").index(this)).show(),首先将class名为info的元素隐藏,然后将对应索引的元素显示。
8.$(".info div:first-child").show().siblings().hide(),将info下面的div元素下的第一个子元素设置为显示,其他的元素隐藏。

以上就是本文的详细内容,希望对大家实现jquery选项卡有所帮助。

Javascript 相关文章推荐
js Array对象的扩展函数代码
Apr 24 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
详解Bootstrap按钮
Jan 04 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
基于jquery实现动态竖向柱状条特效
Feb 12 #Javascript
原生javascript实现自动更新的时间日期
Feb 12 #Javascript
原生javascript实现图片无缝滚动效果
Feb 12 #Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 #Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 #Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 #Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 #Javascript
You might like
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php集成动态口令认证
2016/07/21 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python查看微信撤回消息代码
2018/06/07 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript