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 相关文章推荐
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
React Form组件的实现封装杂谈
May 07 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
js canvas实现五子棋小游戏
Jan 22 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
python实现多线程的两种方式
2016/05/22 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
用python爬取租房网站信息的代码
2018/12/14 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python求前n个阶乘的和实例
2020/04/02 Python
python map比for循环快在哪
2020/09/21 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
园林施工员岗位职责
2013/12/11 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
道歉的话怎么说
2015/05/12 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书