bootstrap菜单中的链接不起作用

Question

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

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

<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"，则它会停止像标签一样（没有活动标签）。

如何解决？

Answer 1

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

看看这个jsfiddle。

如果那不是你想要的，那么请更具体地说明你想要完成的事情。

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