<!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. Ubuntu16.04 下 hadoop的安装与配置（伪分布式环境）

    一.准备 1.1创建hadoop用户 $ sudo useradd -m hadoop -s /bin/bash #创建hadoop用户,并使用/bin/bash作为shell $ sudo pass ...

  2. ORM-面向对象&关系数据库

    ORM-面向对象&关系数据库 对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程 ...

  3. 假设在本地搭一个server和mysql数据库环境，假设使用java来訪问数据库

    我们能够使用speedamp来搭一个server环境,能够在http://download.csdn.net/detail/baidu_nod/7630265下载 解压后无需安装直接能够使用.点击Sp ...

  4. Fiddler抓包学习

    今天看到一个抓包笔记, 因为是老早抓包的需求, 后期不用就忘了, 换电脑桌面软件图标都没了, 点开看了一下一脸懵逼... 这是啥...  以后有需要在看一遍吧! Fiddler抓包使用教程-扫盲篇 h ...

  5. y7000笔记本 darknet-yolo安装与测试（Ubuntu18.04+Cuda9.0+Cudnn7.1）

    环境配置看上一贴 https://www.cnblogs.com/clemente/p/10386479.html 1 安装darknet 1-1 克隆darknet repo git clone h ...

  6. 实战Performance Monitor监测EnyimMemcached

    首先要将EnyimMemcached安装至Windows Performance Counters中. 将Enyim.Caching.dll复制到一个文件夹中 在命令行中进入.NET Framewor ...

  7. 004_Python之all()\any()

    http://www.jianshu.com/p/65b6b4a62071 一.待验证整理

  8. GT常见问题

    1.需要root? 大部分核心功能都需要root权限.需要root的功能有:FPS.Mem Assistant.Logcat日志.抓包.流畅度获取(未开放). 2.root工具总弹出提示框要确认roo ...

  9. 在.NET中调用Java的类

    .NET不能直接调用Java的类,但IKVM.NET解决了这个问题. IKVM.NET提供了两种方式调用java的类: ①把生成的jar包放置在程序根目录,然后通过创建URL实例的方式去调用类中的方法 ...

  10. Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件

    在线预览word.excel.ppt利用aspose动态生成html 主要代码 private bool OfficeDocumentToHtml(string sourceDoc, string s ...