Bootstrap中tab没有反应该怎么办,如何解决
导读:在实际案例的操作过程中,我们可能会遇到“Bootstrap中tab没有反应该怎么办,如何解决”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一...
在实际案例的操作过程中,我们可能会遇到“Bootstrap中tab没有反应该怎么办,如何解决”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。
bootstrap tab没有反应的解决办法:首先找到bootstrap的tab切换核心代码;然后修改好按钮组和内容组即可。
本教程操作环境:windows10系统、bootstrap3.0,本文适用于所有品牌的电脑。
使用bootstrap时踩到的一个坑(tab切换没有出现效果)
前几天使用bootstrap的导航标签页时遇到了个问题:
首先,第一个tab按钮和第一个tab content部分是默认激活状态的。当我点击第二个tab按钮时就第二个tab content可以正常显示。但是,当我再次切换回第一个tab 按钮时,没有效果。查看了一下文档,发现两个li> 都有class = "active"。
最终发现原来是我的文档结构没有完全按照官方例子,按钮容器用的是 div> 而不是 ul> 。
最后,梳理一下,使用bootstrap的tab切换核心代码如下:
!-- 按钮组 --> ul> li class="active"> a href="#home" aria-controls="home" role="tab" data-toggle="tab"> Home/a> /li> li> a href="#profile" data-toggle="tab"> Profile/a> /li> li> a href="#messages" data-toggle="tab"> Messages/a> /li> li> a href="#settings" data-toggle="tab"> Settings/a> /li> /ul> !-- 内容组 --> div class="tab-content"> div class="tab-pane active" id="home"> .../div> div class="tab-pane" id="profile"> .../div> div class="tab-pane" id="messages"> .../div> div class="tab-pane" id="settings"> .../div> /div>
以上就是关于“Bootstrap中tab没有反应该怎么办,如何解决”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Bootstrap中tab没有反应该怎么办,如何解决
本文地址: https://pptw.com/jishu/653948.html