概述

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="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" data-toggle="tab">页签0</a></li>

            <li ><a href="#tab1" data-toggle="tab">页签1</a></li>

            <li ><a href="#tab2" data-toggle="tab">页签2</a></li>

            <li ><a href="#tab3" data-toggle="tab">页签3</a></li>

            <li ><a href="#tab4" 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进行开发的过程中，页面结构嵌套关系比较复杂的时候也容易产生这类错误，但清楚错误产生原理还有分析方法之后，解决起来并不困难。

bootstrap 切换页签失效的解决方法的更多相关文章

  1. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  2. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  3. IE7的overflow失效的解决方法

    IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...

  4. ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法

    今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...

  5. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  6. IE8下部分方法失效的解决方法

    1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为  $.trim(_id) != ...

  7. IIS上发布站点后URL重写失效的解决方法

    在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左 ...

  8. CentOS忘记密码修改方案以及centos卡在开机登录界面，命令失效的解决方法

    CentOS忘记密码修改方案 应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于CentOS7.2环境进行操作的,由于CentOS的版本之间是有差异的,继续之前请先确定 ...

  9. UEditor设置内容setContent()失效的解决方法

    ueditor常见用法: https://blog.csdn.net/qq_31879707/article/details/54894735#UE.Editor:setContent() UEdit ...

随机推荐

  1. Linux ls命令详解

    ls 命令可以说是Linux下最常用的命令之一. -a 列出目录下的所有文件,包括以 . 开头的隐含文件.(后有详解)-b 把文件名中不可输出的字符用反斜杠加字符编号(就象在c语言里一样)的形式列出. ...

  2. ng-cordova(插件库)

    ng-cordova 环境配置 1.执行以下命令 bower install ngCordova 2.引用文件(在引用cordova.js之前引用) <script src="lib/ ...

  3. ORM的概念, ORM到底是什么

    一.ORM简介         对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使 ...

  4. Postgresql快速写入/读取大量数据（.net）

    环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...

  5. LinkedList源码浅析（jdk1.8）

    LinkedList由双向链表实现的集合,因此可以从头或尾部双向循环遍历. LinkedList的操作都是对双向链表的操作,理解双向链表的数据结构就很容易理解LinkedList的实现. 双向链表由带 ...

  6. Java设计模式之包装模式

    有时候一个对象的方法可能不是我们想要的功能,我们希望能将这个方法覆写.而对于覆写,我们最直白的感觉就是通过子类继承的方式,但是有时候对于使用web开发而言,我们能知道获取对象的实现接口,而真正对象是属 ...

  7. 【Unity游戏开发】SDK接入与集成——小白入门篇

    一.简介 通常一款游戏开发到后期,一般都会涉及到第三方SDK的接入与集成,对于不熟悉SDK接入的同学来说,接SDK每次都是云里雾里,而熟悉SDK接入的同学又觉得不断地重复做接入SDK工作这样没有成就感 ...

  8. Linux，activemq-cpp之消息过滤器

    假设过滤器字符串如下: filt1=aaaa filt2=bbbb filt3=cccc activeMQ-cpp中消息过滤器,在发送消息的producer.cpp中,对message进行属性设置,m ...

  9. 【JAVASCRIPT】React学习-组件生命周期

    摘要 整理组件加载过程,详细见官方文档:https://facebook.github.io/react/docs/react-component.html mount 过程 1)constructo ...

  10. JS遍历属性和方法

    引用原文:http://www.cnblogs.com/lishenglyx/archive/2008/12/08/1350573.html#undefined <script language ...