<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

    <script src="bootstrap/js/bootstrap.js"></script>

</head>

<body>

    <div class="out">

        <ul id="myTab" class="nav nav-tabs">

            <li class="active">

                <a href="#a1" data-toggle="tab">菜单1</a>

            </li>

            <li>

                <a href="#a2" data-toggle="tab">菜单2</a>

            </li>

        </ul>

        <div id="myTabContent" class="tab-content">

            <div class="tab-pane fade in active" id="a1">

                <div>菜单1</div>

            </div>

            <div class="tab-pane fade in" id="a2">

                <div>菜单2</div>

            </div>

        </div>

    </div>

    <div class="out">

        <ul id="myTab1" class="nav nav-tabs">

            <li class="active">

                <a href="#a1" data-toggle="tab">菜单3</a>

            </li>

            <li>

                <a href="#a2" data-toggle="tab">菜单4</a>

            </li>

        </ul>

        <div id="myTabContent1" class="tab-content">

            <div class="tab-pane fade in active" id="a1">

                <div>菜单3</div>

            </div>

            <div class="tab-pane fade in" id="a2">

                <div>菜单4</div>

            </div>

        </div>

    </div>

    <script>
　　　　//下面的方法解决了这个问题

        $(function () {

            $('ul.nav.nav-tabs li a').on('click',function () {

                console.log($(this).attr('href'));

                $(this).parents('div.out').find('li').removeClass('active');

                $(this).parent('li').addClass('active');

                $(this).parents('div.out').find('div.tab-pane').removeClass('active');

                $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');

            })

        })
　　　　//若不加入以上代码 在点击菜单4的时候，并不能实现内容切换

    </script>

</body>

</html>

错误显示，点击菜单时只会查找a标签的href对应的tab-content下的id元素（查找修改第一个匹配的元素的class）

示例：（未修改之前bug分析）

　　初始界面

　　

　　初始代码

　　

点击菜单1，2无问题。

　　点击菜单2后：

　　

　　点击菜单4：（bug要出现咯）

　　　　界面

　　　　

　　　　如上，点击菜单4后，第一个div.out下面的div#a1的内容隐藏了，菜单2的内容显示

　　　　代码：

　　　　

在点击了菜单4之后继续点击菜单3，会发现 界面如下：

　　

　　这次打开了菜单1的内容，原因和上面一样，查找了页面中的第一个a1

　　

　总的来说，在点击菜单3和菜单4的时候第二个div.out里面的div#myTabContent1的内容一直没有变化。（谁让它们排行老二呢……）

　　其实在编码的时候还是要保证id的唯一性的，在整个页面的唯一性。但是有的时候，还是避免不了id重复，这个时候我们就需要区分id所在的块咯。

　　 　　下面的代码我就是类似的思路啦。

　　　　 $(function () {

            $('ul.nav.nav-tabs li a').on('click',function () {

                console.log($(this).attr('href'));

                $(this).parents('div.out').find('li').removeClass('active');

                $(this).parent('li').addClass('active');

                $(this).parents('div.out').find('div.tab-pane').removeClass('active');

                $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');

            })

        })

　　

解决tab标签页，相同id时切换失灵的问题的更多相关文章

  1. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  2. VIM 实现tab标签页及分屏，切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] ［+cmd］ 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

  3. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  4. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  5. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  6. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  7. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  8. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  9. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

随机推荐

  1. PHP语言在中国的发展前景怎么样？

    PHP语言在中国的发展前景怎么样? “在互联网泛滥得今天,想要做好这一行业不是那么容易的,然而,互联网编程语言的发展PHP编程语言的出现也是赢了世界发展的潮流. PHP在我国发展也很快,越来越多的编程 ...

  2. Linux系统高树攀登之路

    Linux系统高树攀登之路 Linux作为一种操作系统已经发展了这么长的时间,已然有了很多的“粉丝”,其中不乏有“通天之力”的Linux大牛,也有能在Linux世界里“快乐畅游”的强者,同时也有想要攀 ...

  3. [2] LabelImg图片标注 与 YOLOv3 网络训练 (待补充)

    LabelImg是一个图形图像注释工具. 它是用Python编写的,并使用Qt作为其图形界面. 注释以PASCAL VOC格式保存为XML文件,这是ImageNet使用的格式.Besdies,它也支持 ...

  4. MYSQL动态查询拼接的表名的SQL脚本实现（MYSQL动态执行SQL脚本）

    可以使用MYSQL的预处理逻辑:https://dev.mysql.com/doc/refman/8.0/en/sql-syntax-prepared-statements.html   例如: pr ...

  5. 004_后端js编写工具

    一.框架同事用的后端调试用的工具 google=>"webpack dev server" https://webpack.github.io/docs/webpack-de ...

  6. 五、Oracle 分组查询、视图

    一.分组函数1.avg:平均分2.sum:求和3.max:最大值4.min:最小值注意:前面四个必须针对数值字段,且参数只能是一个5.count:求个数 二.分组查询1.语法是 group by 分组 ...

  7. Debian系统下实现通过wpa_config连接WPA-PSK加密的Wifi连接

    Debian系统下实现通过wpa_config连接WPA-PSK加密的Wifi连接 文章参考:BASST | BLOG : Setting up Wifi - Debian Wheezy 预环境 De ...

  8. emqtt在centos6下的安装

    1 emqtt下载地址 http://www.emqtt.com/downloads 右键 复制链接 http://www.emqtt.com/downloads/3011/centos6 2 打开服 ...

  9. ESP8266 HTTP 项目（2）HTTP网页修改WIFI连接，上电自动连接上次的WIFI。

    网页 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf ...

  10. undo丢失恢复异常恢复，运维DBA反映Oracle数据库无法启动报错ORA-01157 ORA-01110，分析原因为Oracle数据库坏块导致

    本文转自 惜纷飞 大师. 模拟基表事务未提交数据库crash,undo丢失恢复异常恢复,运维DBA反映Oracle数据库无法启动报错ORA-01157 ORA-01110,分析原因为Oracle数据库 ...