jQuery实现套选项卡功能 jQuery实现套选项卡功能

【jQuery实现套选项卡功能】本文实例为大家分享了jQuery实现套选项卡功能的具体代码，供大家参考，具体内容如下
知识点总结：
1.siblings()：兄弟元素，获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
2.removeClass()：方法从被选元素移除一个或多个类。
3.addClass()：方法向被选元素添加一个或多个类。
4.eq()：方法将匹配元素集缩减值指定 index 上的一个。
5.hide()和show()：隐藏和显示特效。
6.parent()：获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
7.find()：方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
8.index()：方法返回指定元素相对于其他指定元素的 index 位置。
一、html

tab1-1tab1-2tab1-3 tab2-1tab2-2tab2-3 tab3-1tab3-2tab3-3 tab4-1tab4-2tab4-3 tab5-1tab5-2tab5-3

二、jQquery

$('#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(); })

执行结果：