<!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. BZOJ3577:玩手机(最大流,二维ST表)

    Description 现在有一堆手机放在坐标网格里面(坐标从1开始),坐标(i,j)的格子有s_(i,j)个手机. 玩手机当然需要有信号,不过这里的手机与基站与我们不太一样.基站分为两种:发送站和接 ...

  2. Linux：Day7(下) 磁盘管理、文件系统管理

    Linux入门 Linux系统管理: 磁盘管理.文件系统管理 RAID基本原理.LVM2 网络管理:TCP/IP协议.Linux网络属性配置 程序包管理:rpm,yum 进程管理:htop,glanc ...

  3. VS2015P配置opencv340

    1添加系统环境变量 F:\dongdong\0tool\navidia_cuda_opencv\opencv\build\x64\vc14\bin 注销重启 2 工程配置 选择好工程  x64 包含目 ...

  4. Flask路由报错：raise FormDataRoutingRedirect(request)

    raise FormDataRoutingRedirect(request)FormDataRoutingRedirect: A request was sent to this URL (http: ...

  5. Oracle 11g实时SQL监控 v$sql_monitor

    Oracle 11g实时SQL监控: 前面提到,在Oracle Database 11g中,v$session视图增加了一些新的字段,这其中包括SQL_EXEC_START和SQL_EXEC_ID, ...

  6. day11---函数对象、名称空间、作用域、闭包函数

    一.函数对象: 定义:函数对象就是函数名,函数名就是存放了函数的内存地址,存放了内存地址的变量就是对象 函数对象的应用: 可以直接被引用:(fn = cp_fn) 可以当做参数传递传递: comput ...

  7. IDEA+'mvn' 不是内部或外部命令

    问题描述: 提示'mvn' 不是内部或外部命令,也不是可运行的程序或批处理文件. 或者提示 The JAVA_HOME environment variable is not defined corr ...

  8. 环境部署（八）：jenkins配置邮件通知

    完成基于jenkins的持续集成部署后,任务构建执行完成,测试结果需要通知到相关人员.这篇博客,介绍如何在jenkins中配置邮件通知的方法... 一.安装邮件插件 由于Jenkins自带的邮件功能比 ...

  9. linux内存源码分析 - 零散知识点

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 直接内存回收中的等待队列 内存回收详解见linux内存源码分析 - 内存回收(整体流程),在直接内存回收过程中, ...

  10. object detection[SSD]

    0. 背景 经过了rcnn,spp,fast rcnn, faster rcnn,yolo,这里又到了ssd模型. faster rcnn的贡献是将候选框区域提取的部分也集成到CNN中去,并且与对象的 ...