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 相关文章推荐
js调试工具Console命令详解
Oct 21 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
php接口技术实例详解
2016/12/07 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
有趣的python小程序分享
2017/12/05 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
先进员工获奖感言
2014/08/14 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
施工安全员岗位职责
2015/04/11 职场文书
调解书格式范本
2015/05/20 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书