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

前端技术 2023/09/01 JavaScript

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

<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选项卡有所帮助。

本文地址：https://www.stayed.cn/item/2638

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案