通常情况下，大家见到的选项卡都是没有嵌套功能的，也就是说就是完成了一层切换效果，本章节分享一段代码实例，实现了选项卡的嵌套功能，也就是选项卡中嵌套有选项卡功能，也就能够容纳更多的内容。
代码如下:
jquery选项卡 要闻 国内 时尚 旅游 科技
01 02 03 a1
b1
c1
01 02 03 a2
b2
c2
01 02 03 a3
b3
c3
01 02 03 a4
b4
c4
01 02 03 a5
b5
c5
上面的代码实现了选项卡的嵌套功能，下面介绍一下它的实现过程。
一.实现原理:
原理其实非常的简单，其实就是大的选项卡里面套了一个小的选项卡，先进行大的选项卡的切换，然后再进行小的选项卡的切换，就是这么简单，这里就不多介绍了，具体可以看代码注释。
二.代码注释:
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选项卡有所帮助。