概述

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. html5小游戏基础知识

    显示一个DIV和隐藏一个DIV 首先,我们要显示一个DIV和隐藏一个DIV需要使用css里面使用: .hide{ display:none;} .show{display:block;} 在需要显示或 ...

  2. Python的语言类型

    Python 是强类型的动态脚本语言 . 强类型:不允许不同类型相加 动态:不使用显示数据类型声明,且确定一个变量的类型是在第一次给它赋值的时候 脚本语言:一般也是解释型语言,运行代码只需要一个解释器 ...

  3. 如何使用slice,substr代替substring(原创)

    //写这个是为了加深对substring和slice的理解 substring: 任何一个参数小于0,都会被替换成0.两个参数,最小值会被当做start,最大值当做end. 参数 描述 start 必 ...

  4. 1.0 配置 appium + java的环境

    1. 配置 appim的环境前面中写到.       2. 在eclipse中配置 java 环境, 具体步骤:       <1>:在 eclipse 中新建 一个java 项目.   ...

  5. 数据结构（C语言版）链表相关操作算法的代码实现

    这次实现的是带头结点的单链表的初始化.遍历.创建.插入.删除.判断链表是否为空.求链表长度函数,编译环境是vs2013. 其中插入和删除函数中循环的条件目前还不太明白. #include<ios ...

  6. localStorage与location的用法

    1.localStorage 是h5提供的客户端存储数据的新方法: 之前,这些都是由 cookie 完成的.但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 coo ...

  7. php---tp框架---表单验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证.分为静态验证和动态验证. 关于基础知识,请查看手册"自动验证"一章 ...

  8. Wince 创新布局

    如果你的项目是用wince开发并且机器是小型的pda,你可以考虑有这种布局方式. IDE上布局,如图 /// <summary> /// 显示层 /// </summary> ...

  9. redhat Redis的安装和部署

    1.    拥有Redis压缩包,地址:http://redis.io/download 我的是3.07 2.    解压包和创建redis安装目录     tar -zxvf XXX     mkd ...

  10. Phpcms 前台页面实现分页

    phpcms开发就是模仿里面原有的方法进行扩展,前台要实现分页,就去找后台页面的分页实现. 如后台 扩展->后台操作日志,就有分页展示. 1.先去添加自己的分页方法(千万不要在原来的方法上修改, ...