概述

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. Windows10 Enterprise版本周年更新问题

    安装Windows10的时候,蛋疼选择了企业版本,导致后来周年更新遇到了蛋疼的问题. 首先是无法接收到周年更新的推送.记得首个周年更新的时候,等了大半年都没有.后来使用了易升进行更新,可以检测到,但是 ...

  2. 正则表达式获取body内容

    最近项目需要,要弄个正则表达式获取body的内容. 用过angularjs就知道,很多时候要写指令时引用templateUrl的时候.template的内容root是不能包含多个节点的,否则就报错. ...

  3. JavaScript深入之从原型到原型链（本文转载）

    JavaScript深入之从原型到原型链(本文转载) https://github.com/mqyqingfeng/Blog.原文地址 构造函数创建对象 我们先使用构造函数创建一个对象: functi ...

  4. Vue--props

    组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的 props 选项. 字面量语法 vs 动态语法 初学者常犯 ...

  5. Unity3D-Shader-复古电影荧幕特效

    [旧博客转移 - 2015年12月6日 18:12]   今天用Shader做了一个复古荧幕效果,老电视机放映的感觉,写篇文章记录一下     原始图片:   没错,这就是电影<泰坦尼克号> ...

  6. ubuntu输入某个目录测试该目录里.C文件里代码行数shell脚本

    #!/bin/bash echo "★☆ ★☆ ★☆ ★☆ ★☆★☆★☆ ★☆ ★☆ ★☆ ★☆★" echo "★☆       统计代码行数        ☆★&qu ...

  7. 跨域访问之CORS

    CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cr ...

  8. table初始化

    table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}

  9. jmeter压力测试报告 - DEMO

    XXX压力测试报告 时间:2015-08-04                                             测试人员:xxx 目录 XXX压力测试报告... 1 一  测试 ...

  10. iOS事件响应链（Responder Chain）

    概述 在iOS中,视图的层级一般都是 父视图->添加各种子视图.这时候某个视图(子视图)上有个按钮,需要我们交互.但是有时候我们会发现无论如何都没有反应.这时候可能就是我们对iOS的事件传递响应 ...