BootStrap 页签切换失效的解决方法

概述

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="external nofollow" rel="stylesheet">
 <!-- 先引入jQuery，再引入bootstrap.js-->
 <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
 <script src="https://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" rel="external nofollow" data-toggle="tab">页签0</a></li>
   <li ><a href="#tab1" rel="external nofollow" data-toggle="tab">页签1</a></li>
   <li ><a href="#tab2" rel="external nofollow" data-toggle="tab">页签2</a></li>
   <li ><a href="#tab3" rel="external nofollow" data-toggle="tab">页签3</a></li>
   <li ><a href="#tab4" rel="external nofollow" 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进行开发的过程中，页面结构嵌套关系比较复杂的时候也容易产生这类错误，但清楚错误产生原理还有分析方法之后，解决起来并不困难。

赞 (0)

相关推荐

  • Bootstrap选项卡动态切换效果

    Bootstrap选项卡动态切换效果

    最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示: 用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设置.active,这样当切换时第一个设置为active的一直在界面中存在,所以我们需要写js代码,给

  • BootStrap中Tab页签切换实例代码

    关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile&

  • 很棒的Bootstrap选项卡切换效果

    很棒的Bootstrap选项卡切换效果

    今天学习了Bootstrap的选项卡,在这里分享一下,具体解释代码中都有,不再重复了. 先看一下效果图吧,显目一些! 实现代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scal

  • Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）

    在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car

  • 基于Bootstrap实现tab标签切换效果

    本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script

  • BootStrap 页签切换失效的解决方法

    BootStrap 页签切换失效的解决方法

    概述 bootstrap开发标签页时,标签页显示正常,但点击时候对应内容区域没有变化. 具体症状与解决方案 1.标签页UI出现,但点击无反应,标签页UI并未随点击进行切换 先检查bootstrap.css,jQuery.js和bootstrap.js是否有正确引入,并保证引入顺序jQuery在前,bootstrap.js在后.再检查代码中是否有其他报错中止了JS. 2.标签页可以随点击进行切换,但点击后前面几条内容可以切换,但后面几条内容切换失败 产生原因: 内容区域的html结构出现错误,在单

  • SpringCloud2020 bootstrap 配置文件失效的解决方法

    Spring Cloud 2020版本 bootstrap 配置文件(properties 或者 yml)无效 如何解决? 背景介绍 微服务是基于Spring Cloud框架搭建的,Spring Cloud Config作为服务配置中心. 业务服务只配置服务名称.启用环境和config的URL地址,其他都配置在配置中心,例如服务端口.服务注册中心地址等.可在开发环境(dev).测试环境(test)和生产环境(prod)分别配置. 所以预想的启动流程是:先加载配置文件,再启动服务. 之前的做法是,

  • thinkPHP使用post方式查询时分页失效的解决方法

    thinkPHP使用post方式查询时分页失效的解决方法

    本文实例讲述了thinkPHP使用post方式查询时分页失效的解决方法.分享给大家供大家参考,具体如下: 昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢各位大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进

  • swiper在vue项目中loop循环轮播失效的解决方法

    长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick

  • iOS开发之导航栏各种右滑返回失效的解决方法汇总

    iOS开发之导航栏各种右滑返回失效的解决方法汇总

    前言 众所周知iOS 的几乎全部页面都是需要右滑返回的,否则用户体验会大打折扣,但是在开发过程中经常会碰到某些页面右滑返回失效的情况,下面记录一下各种情况下右滑返回失效的解决方法. 下面话不多说了,来随着小编一起学习学习吧 自定义返回按钮时失效 当你重写 self.navigationItem.leftBarButtonItem 之后,自带的返回按钮就会被覆盖,右滑返回就会失效,解决办法只要加入下面这句代码即可. - (void)viewDidLoad { [super viewDidLoad]

  • BootStrap 标题设置跨行无效的解决方法

    BootStrap 标题设置跨行无效的解决方法

    最近在使用BootStrap的表格做一个报表界面(不需要报表的功能,只需要预览并且行列定好无需根据数据量变化,如有更好的框架欢迎推荐.),发现标题设置跨行属性rowspan无效.html如下: <table class="table table-bordered"> <thead> <th colspan="2" rowspan="2">功能分类</th> <th>第二列</th&

  • jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

    最近在一个ASP.NET MVC5项目中使用Bootstrap的模态窗(弹出层)来让用户填写内容,其中的一个编辑框提供了自动完成功能,用jQuery UI Autocomplete来实现. 因为我是WEB前端小白,遇到一个问题很久也没解决掉,所以特简单记录一下,供以后查阅. 问题:不使用模态窗的时候,autocomplete可以很好的工作,使用模态窗时弹出的选择菜单会被模态窗遮挡. 解决过程: 首先查到的解决办法是在*autocomplete.css中找到.ui-autocomplete伪类,添

  • BootStrap模态框不垂直居中的解决方法

    本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){}); 在模态框显示之前我们用JS修改他的Top值, 具体代码如下: /** * 垂直居中模态框 **/ function centerModals() { $('.modal').each(function(i) { v

  • PHP利用header跳转失效的解决方法

    本文实例讲述了PHP利用header跳转失效的解决方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 今天header(\"Location: $url\"),以往跳转总是可以的,今天却不动,只是输出结果,以往自己要确认检查,$url的值获取的是否正确,所以在前面加了echo $url:来调试用,结果就导致了header函数的无效. 二.解决方法: 在PHP中用header("location:test.php")进行跳转要注意以下几点: 1.locatio

  • ajax 操作全局监测,用户session失效的解决方法

    ajax 操作全局监测,用户session失效的解决方法 jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行success函数 $.ajax = function (opt) { var _success = opt && opt.success || function (a, b) { }; var _opt = $.extend(opt, { success: functio

随机推荐