jQuery实现嵌套选项卡功能

2024-04-02 19:04:59 891人浏览独家记忆

摘要

本文实例为大家分享了Jquery实现嵌套选项卡功能的具体代码，供大家参考，具体内容如下知识点总结： 1.siblings()：兄弟元素，获得匹配集合中每个元素的同胞，通过选择器进行

本文实例为大家分享了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();
        })

执行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery实现嵌套选项卡功能

本文链接: https://www.lsjlt.com/news/131929.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

jQuery实现嵌套选项卡功能

本文实例为大家分享了jQuery实现嵌套选项卡功能的具体代码，供大家参考，具体内容如下知识点总结： 1.siblings()：兄弟元素，获得匹配集合中每个元素的同胞，通过选择器进行...

99+

2022-11-12
jQuery实现选项卡嵌套效果

本文实例为大家分享了jQuery实现选项卡嵌套效果的具体代码，供大家参考，具体内容如下描述： 1.划上底部a的每一个菜单让顶部的标签span的内容变成对...

99+

2022-11-13
jQuery中如何实现套选项卡功能

本篇内容主要讲解“jQuery中如何实现套选项卡功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery中如何实现套选项卡功能”吧!siblings()：兄弟元素，获得匹配集合中每个元素的...

99+

2023-06-20
jQuery如何实现选项卡功能

这篇文章主要介绍了jQuery如何实现选项卡功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图：代码如下：<!DOCTYPE&n...

99+

2022-10-19
vue实现选项卡功能

本文实例为大家分享了vue实现选项卡功能的具体代码，供大家参考，具体内容如下原理分析和实现这个很简单，无非就是一个点击切换显示而已。但是大家也要实现。如果这个看明白了，再看下面...

99+

2022-11-13
vue+elementui实现选项卡功能

本文实例为大家分享了vue+elementui实现选项卡功的具体代码，供大家参考，具体内容如下用法：首先自己先在项目中定义三个组件（顶部TopNav，左侧LeftAside，中间...

99+

2022-11-13
Vue实现简单选项卡功能

本文实例为大家分享了Vue实现简单选项卡的具体代码，供大家参考，具体内容如下 vue-tab-demo App.vue <template> <div id=...

99+

2022-11-13
vue实现简易选项卡功能

本文实例为大家分享了vue实现简易选项卡功能的具体代码，供大家参考，具体内容如下 1. 效果： 1. 实现发布评论功能 2. 实现评论列表的展示 3. 使用标签页切换的方式来实现 4...

99+

2022-11-13
vue实现经典选项卡功能

本文实例为大家分享了vue实现经典选项卡的具体代码，供大家参考，具体内容如下选项卡方法： 1. vue方法选项卡 2. 事件委托方法性能好点 2大经典选项卡思路： 1.3个li控制...

99+

2022-11-13
vue怎么实现选项卡功能

这篇文章主要介绍了vue怎么实现选项卡功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么实现选项卡功能文章都会有所收获，下面我们一起来看看吧。效果：原理分析和实现这个很简单，无非就是一个点击切换显示而...

99+

2023-06-29
jQuery实现滑动tab选项卡

本文实例为大家分享了jQuery实现滑动tab选项卡的具体代码，供大家参考，具体内容如下先上最终效果: 需求分析: 1.选项卡菜单数量不固定，菜单内容不固定，导致了单个菜单和整体...

99+

2022-11-12
jQuery实现选项卡切换图片

本文实例为大家分享了jQuery实现选项卡切换图片的具体代码，供大家参考，具体内容如下效果：弄出来这个效果，你需要找4张大小相同的图片，大小不一样弄出来效果会很难看代码： &...

99+

2022-11-13
js简单选项卡功能怎么实现

要实现简单的选项卡功能，你可以使用JavaScript和HTML的结合。以下是一个简单的选项卡实现示例：```html.tabcon...

99+

2023-09-22

js
vue如何实现简易选项卡功能

这篇文章主要讲解了“vue如何实现简易选项卡功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue如何实现简易选项卡功能”吧！1. 效果：实现发布评论功能实现评论列表的展示使用标签页...

99+

2023-07-02
Vue如何实现简单选项卡功能

这篇文章将为大家详细讲解有关Vue如何实现简单选项卡功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体内容如下vue-tab-demoApp.vue<template> &nbs...

99+

2023-06-29
Jquery怎么实现更多选项的功能

这篇文章主要介绍“Jquery怎么实现更多选项的功能”，在日常操作中，相信很多人在Jquery怎么实现更多选项的功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Jquery...

99+

2022-10-19
jquery实现全选功能

本文实例为大家分享了jquery实现全选功能的具体代码，供大家参考，具体内容如下话不多说，直接上代码： html代码： <div class="item-box"> ...

99+

2022-11-13
Android实现底部导航栏功能（选项卡）

现在很多android的应用都采用底部导航栏的功能，这样可以使得用户在使用过程中随意切换不同的页面，现在我采用TabHost组件来自定义一个底部的导航栏的功能。我们先看下该d...

99+

2022-06-06

选项卡 Android
jquery选项卡切换效果怎么实现

要实现jQuery选项卡切换效果，可以按照以下步骤进行操作：1. 创建HTML结构，使用`ul`和`li`元素创建选项卡的导航栏，使...

99+

2023-08-15

jquery
如何使用CSS3实现选项卡切换功能

这篇文章主要讲解了“如何使用CSS3实现选项卡切换功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用CSS3实现选项卡切换功能”吧！:target是...

99+

2022-10-19