jQuery实现嵌套选项卡功能
更新时间：2021年08月05日 17:35:41 作者：数猿
这篇文章主要为大家详细介绍了jQuery实现嵌套选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现嵌套选项卡功能的具体代码，供大家参考，具体内容如下
知识点总结：
1.siblings()：兄弟元素，获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
2.removeClass()：方法从被选元素移除一个或多个类。
3.addClass()：方法向被选元素添加一个或多个类。
4.eq()：方法将匹配元素集缩减值指定 index 上的一个。
5.hide()和show()：隐藏和显示特效。
6.parent()：获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
7.find()：方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
8.index()：方法返回指定元素相对于其他指定元素的 index 位置。
一、html
<body>
<div id="div1">
<input class="active" type="button" value="tab1" />
<input type="button" value="tab2" />
<input type="button" value="tab3" />
<input type="button" value="tab4" />
<input type="button" value="tab5" />
</div>
<div class="box1" style="display:block;">
<div class="box2" style="display:block;">
tab1-1
</div>
<div class="box2">
tab1-2
</div>
<div class="box2">
tab1-3
</div>
<input class="active" type="button" value="tab1-1" />
<input type="button" value="tab1-2" />
<input type="button" value="tab1-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab2-1
</div>
<div class="box2">
tab2-2
</div>
<div class="box2">
tab2-3
</div>
<input class="active" type="button" value="tab2-1" />
<input type="button" value="tab2-2" />
<input type="button" value="tab2-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab3-1
</div>
<div class="box2">
tab3-2
</div>
<div class="box2">
tab3-3
</div>
<input class="active" type="button" value="tab3-1" />
<input type="button" value="tab3-2" />
<input type="button" value="tab3-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab4-1
</div>
<div class="box2">
tab4-2
</div>
<div class="box2">
tab4-3
</div>
<input class="active" type="button" value="tab4-1" />
<input type="button" value="tab4-2" />
<input type="button" value="tab4-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab5-1
</div>
<div class="box2">
tab5-2
</div>
<div class="box2">
tab5-3
</div>
<input class="active" type="button" value="tab5-1" />
<input type="button" value="tab5-2" />
<input type="button" value="tab5-3" />
</div>
</body>
二、jQquery
<script src="js/js.js"></script>
<script>
$('#div1>:button').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
// 被点击的按钮在红色按钮中的下标
let i = $(this).index();
$('.box1').eq(i).show().siblings('.box1').hide();
});
$('.box1>:button').on('click',function(){
$(this).addClass('active').siblings('input').removeClass('active');
// 被点击按钮在同辈的3个input的下标
let i = $(this).parent().find('input').index(this);
$(this).parent().find('div').eq(i).show().siblings('div').hide();
})
执行结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了jQuery焦点图轮播效果实现方法,结合实例形式简单分析了jQuery实现焦点图轮播效果的核心代码与相关操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了jQuery插件Validation表单验证的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
Ajax是前后端交互经常用的，虽然jQuery疯狂ajax处理函数 $.post(), $.get(); $.ajax()已经大大的简化了ajax的函数处理，但我们可以更加精益求精2013-11-11
这篇文章主要为大家详细介绍了jquery实现倒计时功能，详细介绍了setInterval()方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
下面小编就为大家带来一篇jQuery 获取跨域XML(RSS)数据的相关总结分析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
签到功能现在算是社交化网站增加网站粘合度的一个普遍做法了，于是也想在自己的项目中添加一个，经过一番度娘，终于完成，这里分享给大家，有需要的小伙伴可以参考下。2015-04-04
GridView中获取被点击行中的DropDownList和TextBox中的值
本文为大家介绍下如何通过点击GridView中的a标签获取被点击行中的下拉框和文本框中的值，具体实现嗲吗如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
本文给大家分享了一个jQuery操作session的插件jQuerysession，并做了简单介绍，及基本语法，非常不错的一个插件，推荐给小伙伴们。2015-01-01
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
deferred对象的延迟功能对jQuery的ajax操作是一个很大的帮助,尤其是回调控制,下面我们就来看一下对jQuery中借助deferred来请求及判断AJAX加载的实例讲解2016-05-05
网站设计者往往会设计一些小的工具类（widgets）或者一些可复用的程序，从而使页面更楚楚动人，更吸引浏览者驻足。这里收集了20个常用Jquery工具类，这些小的工具可以帮助网站设计人员和站长非常容易地创建漂亮的站点。2010-01-01
最新评论