1

Twitter Bootstrap のサンプル ページから直接コードを使用して、IE8 でタブを動作させようとしていますが、サンプル ページと同じように動作していません。

具体的には、非アクティブなタブは常に表示されたままになります。

以下のコード:

<head>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">1...</div>
  <div class="tab-pane" id="profile">2...</div>
  <div class="tab-pane" id="messages">3...</div>
  <div class="tab-pane" id="settings">4...</div>
</div>

<script>
    $(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>

data-toggle タグと提案された .tab() メソッドの両方を使用してタブを開始しようとしましたが、違いはありません...非アクティブなタブは常に表示されています!

JSfiddle リンクはこちら (ただし、とにかく jsfiddle は IE8 では機能しません): http://jsfiddle.net/4gNpt/

解決しました！- HTML ファイルの最初の行は、

<!DOCTYPE html>

そうしないと、まったく正しく動作しません。

4

1 に答える 1