解决tab标签页,相同id时切换失灵的问题
- <!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时切换失灵的问题的更多相关文章
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- VIM 实现tab标签页及分屏,切换命令
1,在一个窗口中,VIM 的小tab标签页命令: :tabnew [++opt选项] [+cmd] 文件 建立对指定文件新的tab :tabc 关闭当前的tab ...
- Easyui 关闭jquery-easui tab标签页前触发事件
关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- Bootstrap插件——(Tab)标签页
项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- ExtJS配置TabPanel可以拖拽Tab标签页
1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- 解决Bootstrap标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
随机推荐
- 动态记忆网络(DMN)
论文:Ask Me Anything: Dynamic Memory Networks for Natural Language Processing 1.概述 Question answering( ...
- P2708 硬币翻转(简单模拟)
题意:弱鸡,其实题意是1到i都变化.然后把所有的硬币都变到正面. 简单的模拟: 思路:本质就是记录相邻字符的有几组不同,比如11010,则就有3组不同,但是,这样变化出来的字符串是00000,所以需要 ...
- ssm框架的整合搭建(一)
一个转行菜鸟半年多工作的开始学习历程............ 我是自学,也是我的记录,我学习的见证,如果你有幸看见,不要吐槽,不足之处请指点,相互学习,谢谢!! 请一起共勉!!!!!!!! 使用技术: ...
- Python中print和return的区别
有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10742671.html 一.解释 1.ret ...
- Python这么强大, 怎样才能快速入坑?
作为一种年轻的编程语言,Python为何能在短短几年的时间内就以迅雷不及掩耳之势驰骋编程界?答案很简单,在人工智能时代,AlphaGo 都在使用的 Python语言,是最接近 AI 的编程语言. 随着 ...
- C#总结(五)调用C++动态库(类型对照)
函数调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配. 在dllimport中加入CallingConvention参数就行了, [DllImport(PCAP_DL ...
- 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)
说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...
- SparkSQL – 从0到1认识Catalyst(转载)
最近想来,大数据相关技术与传统型数据库技术很多都是相互融合.互相借鉴的.传统型数据库强势在于其久经考验的SQL优化器经验,弱势在于分布式领域的高可用性.容错性.扩展性等,假以时日,让其经过一定的改造, ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- mybatis抽取出的工具-(一)通用标记解析器(即拿即用)
目录 1. 简介 1.1 mybatis-config.xml 中使用 1.2 xxxMapper.xml 中使用 2. 原理 2.1 GenericTokenParser 成员变量 2.2 Gene ...