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
投稿猜你喜欢
- 排序问题最近看了极客时间上 《MySQL实战45讲》，纠正了一直以来对 InnoDB 二级索引的一个理解不到位，正好把相关内容总结下。PS：
前言使用的pyecharts是v1.0这里需要注意，pyecharts0.5的版本和v1.0以上的版本完全不一样，可以说是两个包该包能够方便- 前言：在 Go 语言中，同时声明多个常量、变量，或者导入多个包时，可采用分组的方式进行声明。例如下面的代码：import "fmt
- 本文为大家分享了macOS下mysql 8.0.16 安装配置教程，供大家参考，具体内容如下1、安装程序下载打开MySQL 官网选择 DOW
- 这是工作期间同事想要个截完图之后可以显示并且永远前置的截图小工具（即不会被其他程序覆盖）直接上代码：# # -*- coding: utf-
- 1、闭包的概念请大家跟我理解一下，如果在一个函数的内部定义了另一个函数，外部的我们叫他外函数，内部的我们叫他内函数。闭包： 在一个外函数中定
- （下面的代码原来我想用折叠的代码的，但是在google里面老是添加不了折叠的代码，所以就整屏的贴出来了，望大家不要见外。） 朋友的比较好的存
- 今天来分享一个“高大上”的技术——使用python编写一个可以用微信远程控制电脑的程序！先来分析一下控制的具体流程：我们使用微信给特定的邮箱
- 1、表的主键、外键必须有索引；2、数据量超过300的表应该有索引；3、经常与其他表进行连接的表，在连接字段上应该建立索引；4、经常出现在Wh
- 观看本文前最好有一定的Linux命令基础，具体为centos7.3环境中清除使用yum安装的Mysql卸载前请先关闭Mysql服务servi
- 本文实例讲述了JS添加或删除HTML dom元素的方法。分享给大家供大家参考，具体如下：创建新的 HTML 元素如需向 HTML DOM 添
- 没办法就下了一个2.6，如果用2.4就太低了，又折腾了，半天找到了MySQL-python-1.2.2.win32-py2.6.exe 这个
- 首先，我们知道一副牌里有54张牌，然后牌里的数字是从 3 - 2 的里面总共有13张牌，然后 4 中花色 分别是 ♠?
- 最近几个不错网站被封，让人感觉很不爽，现在既不方便用，也不方便学习参考。正好想到曾经“截图”的事情，其实我认为互联网产品还有个特点，更新换代
- Python是一门弱类型语言，很多从C/C++转过来的朋友起初不是很适应。比如，在声明一个函数时，不能指定参数的类型。用C做类比，那就是所有
- 近日大家热议的盗版XP黑屏问题想必很多人都知道了，在这里就不多说。据媒体报道，微软公司将实施逐步投放策略，预计本周将投放5％黑屏，下周投放2
- 方案有很多种，我这里简单说一下：1. into outfileSELECT * FROM mytable
- 前言本文主要给大家介绍了关于Django快速分页的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。分页在web开发
- 代码如下:--相信大家肯定经常会把数据导入到数据库中，但是可能会有些记录行的所有列的数据是null，这为null的数据是我们不需要 --现在
- 例如，有一个字典如下：>>> dic = {"name": "botoo",&qu
