概述

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. SmartSql漫谈

    最近在看smartSql源码,兄弟写的.写的很不错取取经. 记录下一些学习的东西,刚开始我先不系统的写了,随意一点哈,我看的差不多再给大家一个模块一个模块系统的写. public T ExecuteS ...

  2. 第一章（认识jQuery）

    1.3.2编写简单的jQuery代码 ①$是jQuery的简写 ②$("#foo") = $("#foo") ③$.ajax  =  jQuery.ajax ④ ...

  3. Spring Boot框架的搭建

    一.优点: 1.简化了配置,是基于Spring4的一套快速开发整合包,减少复杂度 而Spring MVC基于Spring 的一个MVC框架 2.会有一个statrter整合包,减少样板代码 3.自动配 ...

  4. kbengine服务端引擎技术概览

    http://www.kbengine.org/assets/other/KBEngine_overview.zip

  5. mysql性能监控工具

    参考文档: http://www.linuxidc.com/Linux/2012-09/70459.htm 1.记录慢查询SQL #配置开启 (linux)修改my.cnf: log-slow-que ...

  6. Unity User Group 北京站图文报道：《Unity虚拟现实实战技巧》

    时间来到了盛夏,北京UUG活动也来到了第八期.本次活动的主题为<Unity虚拟现实实战技巧>,为此我们邀请了4位资深的行业大神.这次我们仍然在北京市海淀区丹棱街5号微软大厦举行活动,在这里 ...

  7. AngularJS实用基础知识---入门必备

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...

  8. java constructor 在构造子类时，一定会调用到父类的构造方法 “ 私有属性被继承了？”问题

    ” Error:Implicit super constructor Pet() is undefined. Must explicitly invoke another constructor “ ...

  9. window10(64bit)+VS2010编译ACE_TAO源码库

    1.下载 ACE+TAO下载地址:http://download.dre.vanderbilt.edu/previous_versions/ VS2010下载地址:https://pan.baidu. ...

  10. MySQL5.7使用过程中遇到的问题

    Q1.MySQL无法启动服务,启动服务时提示:"本地计算机 上的 MySQL 服务启动后停止.某些服务在未由其他服务或程序使用时将自动停止." PS.解压缩的MySQL安装过程也可 ...