引导菜单中的链接不起作用答案

【问题标题】：links in bootstrap menu doesn't work引导菜单中的链接不起作用
【发布时间】：2014-09-20 18:09:12
【问题描述】：

我正在尝试在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>

我想通过按这些选项卡重定向到不同的网址。问题是链接在菜单上下文中不起作用，如果我只是写就可以工作：

<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"，那么它将停止表现得像标签（没有活动标签）。

如何解决？

【问题讨论】：

您是否引用了相关的引导 js/css 文件？
@Andrew Matthew，我在 2 小时前使用 NUGET 包（Bootstrap v3.0.1）得到了它。所以我认为这很相关:)

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

看看这个jsfiddle。

如果这不是您想要的，那么请更具体地说明您要完成的工作。

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

【讨论】：

我想使用菜单导航（到特定的 url），而不是显示不同的文本。
我已经尝试过了。如果我删除 data-toogle="tab" 它将无法用作选项卡。我确实希望它看起来像您可以单击的引导选项卡，而不仅仅是通常的链接。
然后您需要根据您单击的链接将class="active" 添加到父li 元素。假设您在/home 上并单击/login 链接，然后您需要从a href="/home" 的父li 元素中删除class="active"，并将其添加到a href="/login" 的父li。有关示例，请参见 this。
我做到了，如果我单击另一个选项卡，相同的“活动”选项卡在没有 data-toogle="tab" 属性的情况下仍然处于活动状态。我发现的唯一解决方案是在 js 代码中手动完成： $('#menu1')[0].className = "active";但是很丑
执行此操作的典型方法是使用 php 或服务器端的任何其他语言，例如我之前评论中的示例。但是，在不知道您的设置的情况下，我唯一可以建议的是进一步搜索。如果您想在 javascript 中处理此问题，您需要执行类似 this 的操作。