Twitter bootstrap nav class. Data-toggle stop menus working

Question

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>

Please would you check your console, there is an error on li element : Uncaught Error: Syntax error, unrecognized expression: (bing.com) — bmscomp

bmscomp bmscomp · Accepted Answer · 2012-10-28T18:15:07

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.

Twitter bootstrap nav class. Data-toggle stop menus working

1 Answers