在 bootstrap 导航栏上，下拉选项卡正常工作，但会阻止其他主菜单选项卡链接工作

Question

我看到了很多类似的问题，none 的答案对我有用。我的 bootstrap 导航栏工作正常，直到我为其中一个选项卡添加了子菜单，并将其设置为下拉列表。但在此之后，主菜单上的其他选项卡停止工作。这是我的 html 头像的一部分：

<script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js "></script>
<script type="text/javascript" src="app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

这是我的导航栏：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="index">Home</a></li>
    <li><a href="resume" data-toggle="tab">Resume</a></li>
    <li class="dropdown">
        <a href="java" class="dropdown-toggle" data-toggle="dropdown">Portfolio
            <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li class="secondLayer"><a class="font" href="java">Java</a></li>
            <li class="secondLayer"><a href="cSharp">C-sharp</a></li>
            <li class="secondLayer"><a href="uml">UML</a></li>
        </ul>
    </li>
    <li><a href="contactMe" data-toggle="tab">Contact Me</a></li>
    <li><a href="aboutMe" data-toggle="tab">About Me</a></li>
</ul>

有人可以帮我解决这个问题吗？

Answer 1

在您添加下拉列表之前，我不确定它是如何工作的。问题是您的所有标签都像 href="index" 并且缺少 # 以表明它们是 ID。全部改成这样href="#index"。请参阅以下示例：

Answer 2

如果您只想让选项卡像链接一样工作，只需从所有内容中删除 data-toggle="tab"。 Bootstrap 插入了一些 JS，以便您的选项卡激活并且非常适合常规导航，但如果您只希望它们成为链接并且只想要 CSS，则无需附加该功能。

这是一个fiddle。

在 bootstrap 导航栏上，下拉选项卡正常工作，但会阻止其他主菜单选项卡链接工作

On bootstrap navbar, dropdown tab works properly, but prevents other main menu tab links work

jquery

navbar

twitter-bootstrap