1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  7. <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
  8. <script src="bootstrap/js/bootstrap.js"></script>
  9. </head>
  10. <body>
  11. <div class="out">
  12. <ul id="myTab" class="nav nav-tabs">
  13. <li class="active">
  14. <a href="#a1" data-toggle="tab">菜单1</a>
  15. </li>
  16. <li>
  17. <a href="#a2" data-toggle="tab">菜单2</a>
  18. </li>
  19. </ul>
  20. <div id="myTabContent" class="tab-content">
  21. <div class="tab-pane fade in active" id="a1">
  22. <div>菜单1</div>
  23. </div>
  24. <div class="tab-pane fade in" id="a2">
  25. <div>菜单2</div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="out">
  30. <ul id="myTab1" class="nav nav-tabs">
  31. <li class="active">
  32. <a href="#a1" data-toggle="tab">菜单3</a>
  33. </li>
  34. <li>
  35. <a href="#a2" data-toggle="tab">菜单4</a>
  36. </li>
  37. </ul>
  38. <div id="myTabContent1" class="tab-content">
  39. <div class="tab-pane fade in active" id="a1">
  40. <div>菜单3</div>
  41. </div>
  42. <div class="tab-pane fade in" id="a2">
  43. <div>菜单4</div>
  44. </div>
  45. </div>
  46. </div>
  47. <script>
        //下面的方法解决了这个问题
  48. $(function () {
  49. $('ul.nav.nav-tabs li a').on('click',function () {
  50. console.log($(this).attr('href'));
  51. $(this).parents('div.out').find('li').removeClass('active');
  52. $(this).parent('li').addClass('active');
  53. $(this).parents('div.out').find('div.tab-pane').removeClass('active');
  54. $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');
  55. })
  56. })
        //若不加入以上代码 在点击菜单4的时候,并不能实现内容切换
  57. </script>
  58. </body>
  59. </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 () {

  1. $('ul.nav.nav-tabs li a').on('click',function () {
  2. console.log($(this).attr('href'));
  3. $(this).parents('div.out').find('li').removeClass('active');
  4. $(this).parent('li').addClass('active');
  5. $(this).parents('div.out').find('div.tab-pane').removeClass('active');
  6. $(this).parents('div.out').find('div'+$(this).attr('href')).addClass('active');
  7. })
  8. })

  

解决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. 动态记忆网络(DMN)

    论文:Ask Me Anything: Dynamic Memory Networks for Natural Language Processing 1.概述 Question answering( ...

  2. P2708 硬币翻转(简单模拟)

    题意:弱鸡,其实题意是1到i都变化.然后把所有的硬币都变到正面. 简单的模拟: 思路:本质就是记录相邻字符的有几组不同,比如11010,则就有3组不同,但是,这样变化出来的字符串是00000,所以需要 ...

  3. ssm框架的整合搭建(一)

    一个转行菜鸟半年多工作的开始学习历程............ 我是自学,也是我的记录,我学习的见证,如果你有幸看见,不要吐槽,不足之处请指点,相互学习,谢谢!! 请一起共勉!!!!!!!! 使用技术: ...

  4. Python中print和return的区别

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python  https://www.cnblogs.com/xxtalhr/p/10742671.html 一.解释 1.ret ...

  5. Python这么强大, 怎样才能快速入坑?

    作为一种年轻的编程语言,Python为何能在短短几年的时间内就以迅雷不及掩耳之势驰骋编程界?答案很简单,在人工智能时代,AlphaGo 都在使用的 Python语言,是最接近 AI 的编程语言. 随着 ...

  6. C#总结(五)调用C++动态库(类型对照)

    函数调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配. 在dllimport中加入CallingConvention参数就行了, [DllImport(PCAP_DL ...

  7. 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

    说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...

  8. SparkSQL – 从0到1认识Catalyst(转载)

    最近想来,大数据相关技术与传统型数据库技术很多都是相互融合.互相借鉴的.传统型数据库强势在于其久经考验的SQL优化器经验,弱势在于分布式领域的高可用性.容错性.扩展性等,假以时日,让其经过一定的改造, ...

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

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

  10. mybatis抽取出的工具-(一)通用标记解析器(即拿即用)

    目录 1. 简介 1.1 mybatis-config.xml 中使用 1.2 xxxMapper.xml 中使用 2. 原理 2.1 GenericTokenParser 成员变量 2.2 Gene ...