概述

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. CSS input type="number"出现上下箭头时解决方案

    input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] {      -moz-appearance:tex ...

  2. 二、Solr单机版的搭建

    1.1. 运行环境 solr 需要运行在一个Servlet容器中,Solr4.10.3要求jdk使用1.7以上,Solr默认提供Jetty(java写的Servlet容器),本次使用Tocmat作为S ...

  3. Vijos 1002 过河 状态压缩DP

    描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数轴上 ...

  4. thinkphp的空控制器和空操作以及对应解决方法

    在上篇随笔中我们已经知道了tp框架的四种访问方式,那么当在地址栏输入不存在的操作方法.控制器会怎么样呢? 先看一下定义: 空操作:一个对象(控制器)调用本身不存在的方法 空控制器:在实例化控制器对象的 ...

  5. lsdslam代码笔记

    0.1. question 0.2. 算法框架 0.3. 代码解析 0.3.1. 数据结构 0.3.1.1. Frame 0.3.1.2. FrameMemory 0.3.1.3. FramePose ...

  6. 妙用Outlook2003群发商业邮件

    妙用Outlook2003群发商业邮件   我们知道,如果需要在Outlook 2003中向多个对象发送邮件,那么只需要在指定收件人时用分号输入多个邮件地址或者使用抄送方式即可:假如对象较多,可以使用 ...

  7. 使用freemarker模板生成word文档

    项目中最近用到这个东西,做下记录. 如下图,先准备好一个(office2003)word文档当做模板.文档中图片.姓名.性别和生日已经使用占位符代替,生成过程中将会根据实际情况进行替换. 然后将wor ...

  8. VBS连接远程Oracle

    原文链接:http://hi.baidu.com/coo_boi/item/5a2e1860ded285136995e6a7 连接方式还是用的ADO,驱动是MSDAORA. 使用oracle前,ora ...

  9. Maven学习专题--Maven入门及安装

    因为项目需要,新项目需要使用Maven开发,但是组内大部分没有接触过maven.我就毅然承担搭建maven环境的任务了.因为一切重头开始,就想把自己的整个搭建环境.项目创建.框架整合和模块管理整个过程 ...

  10. Javasript 正则匹配任意字符

    今天在写Js匹配任意字符的时候发现使用.不好使,当输入内容有回车的时候就会失效. 后来上网查,发现js的任意字符不包括\n. 本来想写一个trim后长度为10的正则验证,最后使用[\s|\S]来代替任 ...