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 函数速查表
Feb 07 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
js Dialog 实践分享
2012/10/22 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python实现猜单词小游戏
2020/05/22 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
怎么写有吸引力的自荐信
2013/11/17 职场文书
劳动实践课感言
2014/02/01 职场文书
房屋转让协议书
2014/04/11 职场文书
公司节能减排方案
2014/05/16 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫