引导菜单中的链接不起作用 [英] links in bootstrap menu doesn't work

问题描述

我正在尝试按照 bootsrap API 制作导航菜单.

I'm trying make a navigation menu following the bootsrap API.

这是我所拥有的:

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="Home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="Login" role="tab" data-toggle="tab">Login</a></li>
    <li><a href="Prediction" role="tab" data-toggle="tab">Predict</a></li>
</ul>

我想通过按这些标签重定向到不同的网址.问题是链接在菜单上下文中不起作用，如果我只写:

I want to redirect to different urls by pressing these tabs. The problem is that links doesn't work in menu context and DO work if I just write:

<a href="Home">Home</a>
<a href="Login">Login</a>
<a href="Prediction">Predict</a>

当我将 role="tab" data-toggle="tab" 添加到菜单元素时出现问题.如果我将删除 role="tab" data-toggle="tab" 然后它停止表现得像选项卡(没有活动选项卡).

The problems appear when I add role="tab" data-toggle="tab" to a menu element. If I will remove role="tab" data-toggle="tab" then it stops to behave like tabs (no active tab).

如何解决?

推荐答案

如果我理解正确的话，您正试图根据您单击的链接切换不同的 div.您需要在每个 href= 中使用 #target 来引用目标元素，其中 target 是要打开的元素.

If I understand you correctly, you are trying to toogle different div's based on the link you click on. You need to reference the target element using #target in each href=, where target is the id of the element you want to open.

看看这个 jsfiddle.

如果这不是您想要的，那么请更具体地说明您要完成的任务.

If that's not what you are looking for then please be a bit more specific of what you are trying to accomplish.

根据评论更新:只需从链接中删除 data-toogle="tab" 并将 href="#home" 替换为href="/home" 或您想要导航到的任何路径.

Update based on comment: just remove data-toogle="tab" from the links and replace href="#home" with href="/home" or whatever path you want to navigate to.

这篇关于引导菜单中的链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！