1

TwitterBootstrapのclass="nav"に問題があります。

「data-toggle='tab'」を含めると、メニュー項目が機能しなくなります。

（BTW：データトグルを削除すると、最初のオプションは機能しませんが、残りのオプションは機能します。つまり、データトグルを削除すると、Googleは機能しませんが、BingとBing2は機能し、Yahooは機能しませんが、CNNと天気はあります）

これはコードです：

<!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>
4

1 に答える 1

2

これが実際の例です：http：//jsbin.com/ujujub/1/edit

三つのこと：

  • 含めることを忘れないでくださいbootstrap-tab.js
  • タブからタブへのナビゲーションの処理を担当するスクリプトを作成します
  • リンクは、サイトのコンテンツを直接指すのではなく、サイトのコンテンツをラップするdivのIDを指す必要があります。
于 2012-10-28T18:15:07.920 に答える