如何解决bootstrap导航条不跳转的问题

最新推荐文章于 2023-05-27 15:01:51 发布

juwuyou

最新推荐文章于 2023-05-27 15:01:51 发布

阅读量815

点赞数

本文链接：https://blog.csdn.net/juwuyou/article/details/110824475

版权

本教程介绍了如何解决Bootstrap导航条不跳转的问题。方法包括：使用JavaScript的`$('#myTabs a').click(function (e){...}`，添加`data-toggle`标记，以及通过`window.location`实现跳转。在遇到导航条的active状态不切换或者链接失效时，可以参考这些方法进行修复。同时，注意jQuery库需在Bootstrap库之前引入。

摘要由CSDN通过智能技术生成

bootstrap导航条不跳转的解决办法：1、使用“$('#myTabs a').click(function (e){...}”方式；2、使用“data-toggle”标记；3、通过“window.location”实现跳转即可。

本教程操作环境：Windows7系统、bootstrap3版，该方法适用于所有品牌电脑。

推荐：《bootstrap视频教程》

最近在学习bootstrap，准备做一个个人网站的主页。前端就准备采用bootstrap来做了，因为，bootstrap确实很漂亮，也很流行，有了问题也方便通过百度或者谷歌找到答案。

我的页面大概是这个样子:

主要就是采用bootstrap的navbar组件设计了一个自己的导航条，以为很简单的事情，结果最后导航条没有工作。

问题：

1、导航条不按照点击切换相应tab的active状态。链接能够正常跳转，但是始终是Home处于激活状态。

对于这个问题首先百度了一下，可能的原因在于jquery库引用不正确，jquery库的引用一定要在bootstrap库之前，因为bootstrap依赖jquery库工作。

但是我检查了一遍自己的代码后，发现我的引用顺序并没有问题。

接下来，我在bootstrap官网中找到这样一句话（我使用的是bootstrap3）

截图地址：https://v3.bootcss.com/javascript/#tabs

这里表明有两种方法可以激活tab，第一种是通过如下的javascript代