Twitter bootstrap nav class. Data-toggle stop menus working

问题

I have a problem with Twitter Bootstrap's class="nav."

When I include "data-toggle='tab'", none of my menu items function.

(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)

This is the code:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>

        <ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
          <li class="active"><a href="http://www.google.com" data-toggle="tab">Google</a></li>
          <li><a href="http://www.bing.com" data-toggle="tab">Bing</a></li>
          <li><a href="http://www.bing.com" data-toggle="tab">Bing2</a></li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">More choices <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="http://www.yahoo.com" data-toggle="tab">Yahoo</a></li>
              <li><a href="http://www.cnn.com" data-toggle="tab">CNN</a></li>
              <li><a href="http://www.accuweather.com">Weather</a></li> <!-- NOTE data-toggle removed -->
            </ul>
          </li>

        </ul>

</body>
</html>

回答1:

Here is a working example: http://jsbin.com/ujujub/1/edit

Three things:

Remember to include bootstrap-tab.js
Write a script responsible for handling navigation from tab to tab
The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.

来源：https://stackoverflow.com/questions/13110025/twitter-bootstrap-nav-class-data-toggle-stop-menus-working

标签

html

tabs

twitter-bootstrap

navigation

nav