BootStrap 页签切换失效的解决方法
作者：馅饼 发布时间：2024-04-19 09:52:28
标签：bootstrap,页签切换
概述
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>
审查元素时看到tab-pan与tab-content在同级中出现是最明显的特征。这时候只需要查看最后一个能生效点击的页签中的代码(示例中为tab2)，将多余的div结束标签去掉即可。
总结
这种错误易除了刚接触bootstrap的开发者容易遇见之外，使用模板引擎配合bootstrap进行开发的过程中，页面结构嵌套关系比较复杂的时候也容易产生这类错误，但清楚错误产生原理还有分析方法之后，解决起来并不困难。
来源：http://www.cnblogs.com/coder-xianbing/archive/2017/08/17/7381700.html
0
投稿猜你喜欢
环境配置新建python虚拟环境并激活conda create -n pyqt python=3.8conda activate py36安- 一、打开摄像头import cv2import numpy as npdef video_demo(): capture = c
- 好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态.注意两个事项,ifr 是一个以存在的 iframe
- 本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下：话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得
- 一、使用以下命令查看当前安装mysql情况，查找以前是否装有mysqlrpm -qa|grep -i mysql可以看到如下图的所示：显示之
- 本篇文章记录一下函数的等高线及其三维图像的可视化方法。本例绘制的函数为：1. 网格点  在绘制曲线之前，
- 自学Python3第5天，今天突发奇想，想用Python识别图片里的文字。没想到Python实现图片文字识别这么简单，只需要一行代码就能搞定
- 起因是这样的，有一张表存在慢sql，查询耗时最多达到12s，定位问题后发现是由于全表扫描导致，需要对字段增加索引，但是表的数据量600多万有
- 在添加新记录时，有时候我们需要将部分动态内容自动添加到指定的文本域，例如上传一个文件后，将文件名自动添加到一个独立的记录框内，以
- 问题原因：我遇到的情况，装了.NET2.0+IIS升级后就出现以上问题；不确定其他原因也会不会产生类似错误。（如果有，希望大家能贴出更多的原
- python提高图像质量概述调研了一些提高图像质量的方式深度学习方法，如微软的Bringing-Old-Photos-Back-to-Lif
- gRPCgRPC远程过程调用框架是基于动作的模式，类似远程调用微服务。这使得gRPC成为一种围绕Protobufs构建的进程间通信(IPC)
- 刚接触 Go 语言时，就听说有一个叫rune的数据类型，即使查阅过一些资料，对它的理解依旧比较模糊，加之对陌生事物的天然排斥，在之后很长一段
- 本篇文章记录如何使用python将pdf文件切分成一张一张图片，包括环境配置、版本兼容问题。环境配置（mac）安装ImageMagickbr
- 目录1、Unittest为Python内嵌的测试框架，不需要特殊配置2、编写规范总结1、Unittest为Python内嵌的测试框架，不需要
- 在计算机和信息技术领域里 I/O 这个术语表示输入 / 输出 ( 英语：Input / Output ) ，通常指数据在存储器（内部和外部）
- 目录分区机制SELECT 查询INSERT 操作DELETE 操作UPDATE 操作分区的类型MySQL 的分区的实现方式是对数据表进行一层
- SQL查询某字段的值为空sql中字段的默认有NULL和另一种空白的形式如何取查询这两种存在的记录呢？空白值查询：SELECT * FROM
- 在学习使用Python的过程中，一定会遇到文字输入与处理，这就不可避免的会使用中文字符。但是Python2.7默认使用的字符集是ASCII，
- 我一直不很明白在中国国内流行的设计风格，象在国外的很多地方都有鲜明的设计大方向，比如韩国站点设计一般比较花哨，所以动画很多，我们常常看到韩国
