BootStrap 页签切换失效的解决方法


Posted in Javascript onAugust 17, 2017

概述

bootstrap开发标签页时,标签页显示正常,但点击时候对应内容区域没有变化。

具体症状与解决方案

1.标签页UI出现,但点击无反应,标签页UI并未随点击进行切换

先检查bootstrap.css,jQuery.js和bootstrap.js是否有正确引入,并保证引入顺序jQuery在前,bootstrap.js在后。再检查代码中是否有其他报错中止了JS。

2.标签页可以随点击进行切换,但点击后前面几条内容可以切换,但后面几条内容切换失败

产生原因:

内容区域的html结构出现错误,在单个tab中多写了一个div的结束标签,使得tab-content这一div过早的关闭,剩下的tab-pan则与原来的tab-content变成了平级的关系而不是父子关系。仔细观察,点击之后原来应该出现在tab-content区域的内容会出现在页面的下方是主要的特征。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>bootstrap页签切换失效</title>
 <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <!-- 先引入jQuery,再引入bootstrap.js-->
 <script src="//cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
 <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
  .content{
   width: 60%;
   margin: auto;
  }
 </style>
</head>
<body>
 <div class="content">
  <ul class="nav nav-tabs" id='consume_tab'>
   <li><a href="#tab0" rel="external nofollow" data-toggle="tab">页签0</a></li>
   <li ><a href="#tab1" rel="external nofollow" data-toggle="tab">页签1</a></li>
   <li ><a href="#tab2" rel="external nofollow" data-toggle="tab">页签2</a></li>
   <li ><a href="#tab3" rel="external nofollow" data-toggle="tab">页签3</a></li>
   <li ><a href="#tab4" rel="external nofollow" data-toggle="tab">页签4</a></li>
  </ul>
 <div class="tab-content">
  <div class="tab-pane active " id="tab0">
   <div>
    <span>页签0内容</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab1">
   <div>
    <span>页签1内容</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab2">
   <div>
    <span>页签2内容,多了一个结束标签</span>
   <!-- 页签2内容多了一个结束标签-->
   </div>
   </div>
  </div>
  <div class="tab-pane fade " id="tab3">
   <div>
    <span>页签3内容,出现在页签2下方</span>
   </div>
  </div>
  <div class="tab-pane fade " id="tab4">
   <div>
    <span>页签4内容,出现在页签2下方</span>
   </div>
  </div>
 </div>
</div>
</body>
</html>

BootStrap 页签切换失效的解决方法

审查元素时看到tab-pan与tab-content在同级中出现是最明显的特征。这时候只需要查看最后一个能生效点击的页签中的代码(示例中为tab2),将多余的div结束标签去掉即可。

总结

这种错误易除了刚接触bootstrap的开发者容易遇见之外,使用模板引擎配合bootstrap进行开发的过程中,页面结构嵌套关系比较复杂的时候也容易产生这类错误,但清楚错误产生原理还有分析方法之后,解决起来并不困难。

Javascript 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
Node.js实现文件上传
Jul 05 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 #Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 #Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 #Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 #Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
vue中appear的用法
Aug 17 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python是什么 Python的用处
2020/05/26 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
大学生职业生涯设计书
2014/01/02 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
求职自荐信的格式
2014/04/07 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
公司慰问信范文
2015/03/23 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书