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

Question

我看到了许多类似的问题，但没有一个答案对我有用。 我的引导导航栏工作正常，直到我为其中一个选项卡添加子菜单，并将其设置为下拉列表。但在此之后，主菜单上的其他选项卡停止工作。这是我的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

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

这是fiddle。

Answer 2

我不确定它是如何工作的在您添加下拉列表之前。问题是您的所有标签都像href="index" 并且缺少# 以表明它们是ID。将它们全部更改为喜欢这个href="#index"。请看下面的例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<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>



<div class="tab-content">

  <div class="tab-pane active" id="index">index</div>
  <div class="tab-pane" id="resume">resume</div>
  <div class="tab-pane" id="contactMe">contactMe</div>
  <div class="tab-pane" id="aboutMe">aboutMe</div>
</div>

注意如果你真的希望这些是链接而不是标签，那么你使用了错误的元素，摆脱所有对标签的引用并切换并使用 url在你的href中，比如href="index.html"