Bootstrap 导航条不跳转怎么解决? 下面本篇文章给大家介绍一下解决 Bootstrap 导航条不跳转问题的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
最近在学习 Bootstrap, 准备做一个个人网站的主页. 前端就准备采用 Bootstrap 来做了, 因为, Bootstrap 确实很漂亮, 也很流行, 有了问题也方便通过百度或者谷歌找到答案.
我的页面大概是这个样子:
主要就是采用 Bootstrap 的 navbar 组件设计了一个自己的导航条, 以为很简单的事情, 结果最后导航条没有工作.
[相关教程推荐: Bootstrap 视频教程 https://www.html.cn/kuangjia/bootstrap/ ]
问题:
1, 导航条不按照点击切换相应 tab 的 active 状态. 链接能够正常跳转, 但是始终是 Home 处于激活状态.
对于这个问题首先百度了一下, 可能的原因在于 jQuery 库引用不正确, jQuery 库的引用一定要在 Bootstrap 库之前, 因为 Bootstrap 依赖 jQuery 库工作.
但是我检查了一遍自己的代码后, 发现我的引用顺序并没有问题.
接下来, 我在 Bootstrap 官网中找到这样一句话 (我使用的是 bootstrap3)
截图地址: https://v3.bootCSS.com/javascript/#tabs
这里表明有两种方法可以激活 tab, 第一种是通过如下的 JavaScript 代码:
- $('#myTabs a').click(function (e) {
- e.preventDefault()
- $(this).tab('show')})
第二种是通过 "data-toggle" 标记
- <ul class="nav nav-tabs" role="tablist">
- <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
- <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
- <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
- <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
- </ul>
采用任意一种方法后, navbar active 状态不随点击改变的问题解决了, 但是发现导航条中也就是 < ul></ul > 标记中所有 < a > 标记的 href 属性都失效了, 后来也是一顿搜索, 发现, Bootstrap 把 href 属性当 id 处理, 只链接到当前页面的位置, 而外部跳转链接被屏蔽.
参考:(https://stackoverflow.com/questions/16785264/jquery-syntax-error)
2, 解决了第一项问题后, 结果发现 navbar 中的链接无法跳转到外部链接.
正如前面提到, 外部链接被屏蔽, 后来只好想到通过 JS 来实现跳转, 因此, 我把 navbar 的激活代码修改了一下, 通过 Windows.location 来实现跳转.
- $(function () {
- $("#myBar li").click(function (e) {
- e.preventDefault()
- $(this).tab('show')
- Windows.location.href = 'http://localhost:3000' + $(this).children('a').attr('href')
- })
- })
这样才算解决了 bootstap 导航条的问题. 但总觉得应该有更好的解决方法, 希望个为朋友给个建议吧.
更多 web 前端自学 https://www.html.cn/ 相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/bootstrap/17917.html