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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
JS排序之选择排序详解
Apr 08 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
微信小程序实现下载进度条的方法
Dec 08 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
基于mysql的论坛(4)
2006/10/09 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
javascript控制swfObject应用介绍
2012/11/29 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python网站验证码识别
2016/01/25 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
浅谈Python 参数与变量
2020/06/20 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
单位人事专员介绍信
2014/01/11 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
市场营销求职信范文
2014/02/21 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
2014年环保局工作总结
2014/12/11 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
python 闭包函数详细介绍
2022/04/19 Python