jQuery实现嵌套选项卡功能

2024-10-04 21:39:25

本文实例为大家分享了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实现具有嵌套功能的选项卡

关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容. 通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容. 代码如下: <head> <meta charset="gb2312"> <title>jquery选项卡</title> <style type="text/
JavaScript实现多层颜色选项卡嵌套

本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下这是学JavaScript时候的一个作业,如果没有思路还是挺有难度的,但是思路正确的话一步一步来就很简单做出来了. 实现效果 HTML部分代码 <div class="box" id="box"> <ul id="leftBox"> <li class="active">a</li>
jQuery实现选项卡嵌套效果

本文实例为大家分享了jQuery实现选项卡嵌套效果的具体代码,供大家参考,具体内容如下描述: 1.划上底部a的每一个菜单让顶部的标签span的内容变成对应的a的内容 2.划上左边的li 切换到右侧对应的div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-
jQuery实现嵌套选项卡功能

本文实例为大家分享了jQuery实现嵌套选项卡功能的具体代码,供大家参考,具体内容如下知识点总结: 1.siblings():兄弟元素,获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. 2.removeClass():方法从被选元素移除一个或多个类. 3.addClass():方法向被选元素添加一个或多个类. 4.eq():方法将匹配元素集缩减值指定 index 上的一个. 5.hide()和show():隐藏和显示特效. 6.parent():获得当前匹配元素集合中每个元素的父元素
jQuery实现套选项卡功能

本文实例为大家分享了jQuery实现套选项卡功能的具体代码,供大家参考,具体内容如下知识点总结: 1.siblings():兄弟元素,获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. 2.removeClass():方法从被选元素移除一个或多个类. 3.addClass():方法向被选元素添加一个或多个类. 4.eq():方法将匹配元素集缩减值指定 index 上的一个. 5.hide()和show():隐藏和显示特效. 6.parent():获得当前匹配元素集合中每个元素的父元素,
js/jQuery简单实现选项卡功能

第一种方法是用原生的js代码如下: 复制代码代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Ta
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能

在Web中用到多选项卡功能的网站有很多,比如163和126邮箱,用过的人知道.本人在那么多的类似插件中,目前碰到这个比较好,花了点时间调试出来了,请看效果图: 这款插件叫jqueryMagicTabs,上图实现了基本功能,如添加选项卡,选择指定的选项卡.当添加的选项卡超过一定长度时会出现左右滑动的按钮,同时支持鼠标滑动选项卡. 这段代码如下所示: 复制代码代码如下: <%@ page language="java"contentType="text/html; cha
基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能.分享给大家供大家参考,具体如下: jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到.今天找到一个实现jquery tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了.用 tab 页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中.很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕.这一款基于jquery 的
jQuery超简单选项卡完整实例

本文实例讲述了jQuery实现的超简单选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的选项卡示例,比较实用的一个实例,希望通过本文让大家掌握如何使用jQuery创建一个选项卡标签,这是目前WEB前端设计比较流行的一款功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-nav-cha-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
jQuery UI制作选项卡（tabs）

先看一下效果: Jquery-UI 选项卡的制作实际上是利用锚点链接的原理,实现起来非常的简单. 第一步:引入 jquery 和 jquery-ui 文件. 以下是我的head部分的代码: <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="style.css"> <script
js实现简单选项卡功能

本文为大家分享了js实现简单选项卡功能的具体代码,供大家参考,具体内容如下首先我们来写HTML代码,构建出整体结构代码如下:  <nav id="nav"> <ul> <li class="act">选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> &
jQuery响应滚动条事件功能示例

本文实例讲述了jQuery响应滚动条事件功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
jQuery EasyUI Tab 选项卡问题小结

需要解决的问题: 比如说我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col

jQuery实现嵌套选项卡功能

知识点总结：

一、html

二、jQquery

相关推荐

随机推荐