7

私が抱えている問題と同様の問題に関するTwitterBootstrapの質問はたくさんありますが、特定の問題の解決策を見つけることができませんでした。コンテンツを表示するためにTwitterのブートストラップの「タブ」機能を使用しています。スクリプトはアクティブなタブの変更を変更できますが、コンテンツは同じままです。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hello, Tabs!</title>

        <link rel="stylesheet" href="public/css/bootstrap.min.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
        <script type="text/javascript" src="public/js/bootstrap.min.js"></script>
    </head>
    <body>


     <h3>Version Information:</h3>
     <div class="tabbable tabs-left">
         <ul class="nav nav-tabs" data-tabs="tabs">
             <li class="active">
                 <a href="#project/src/Graph/Graph.pm__0" data-toggle="tab">9424</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__1" data-toggle="tab">9058</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a>
             </li>
             <li>
                 <a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a>
             </li>
         </ul>
         <div class="tab-content">
             <div class="tab-pane active" id="project/src/Graph/Graph.pm__0">
                 <p>
                 Author: joe<br>
                 Version: v9424 (1:31 pm February 28, 2013)<br>
                 Action: Modified<br>
                 Message: Finalized a bit of the code... should be better now.<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__1">
                 <p>
                 Author: joe<br>
                 Version: v9058 (9:13 pm February 26, 2013)<br>
                 Action: Modified<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__2">
                 <p>
                 Author: joe<br>
                 Version: v8928 (2:08 am February 25, 2013)<br>
                 Action: Modified<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__3">
                 <p>
                 Author: joe<br>
                 Version: v8926 (1:14 am February 25, 2013)<br>
                 Action: Modified<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__4">
                 <p>
                 Author: joe<br>
                 Version: v8924 (10:26 pm February 24, 2013)<br>
                 Action: Modified<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__5">
                 <p>
                 Author: joe<br>
                 Version: v8890 (9:59 pm February 23, 2013)<br>
                 Action: Modified<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__6">
                 <p>
                 Author: joe<br>
                 Version: v8889 (9:53 pm February 23, 2013)<br>
                 Action: Added<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
             <div class="tab-pane" id="project/src/Graph/Graph.pm__7">
                 <p>
                 Author: joe<br>
                 Version: v8887 (9:40 pm February 23, 2013)<br>
                 Action: Added<br>
                 Message: Hello, world!<br>
                 </p>
             </div>
         </div>
     </div>



    <script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('.nav-tabs').tab();
    });
    </script>
    </body>
</html>

これを実行すると、すべての依存関係ファイルが正常にロードされます（参考までに、使用されているブートストラップのバージョンは2.3.1です）。私はかなり前からこの問題について頭を悩ませてきましたので、どんな助けでも大歓迎です。

編集：これはエラーコードを含むjsfiddleリンクです。

4

3 に答える 3

7

Bootstrapスクリプト参照をreadyイベントの上に移動する必要があります。したがって、ページの下部は次のようになります。

<script src="public/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function ($) {
    $('.nav-tabs').tab();
});
</script>

また、HTML5 doctypeを指定したため、type属性はscriptタグ内でオプションです。

編集2：

私はあなたが手動のタブバインディングを取り除くことができるとかなり確信しています-私はそれを私のサイトでは使用していません、そしてこのjsFiddleはそれもしません：http：//jsfiddle.net/C3gQb/

ご覧のとおり、「タブ」のクリックイベントをバインドするだけで、機能します。これは機能するはずです：

<script src="public/js/bootstrap.min.js"></script>
<script>
$(function(){ 
    $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });  
});
</script>

そうでない場合は、投稿した内容から明らかではない、ブラウザ/開発環境に異常な何かがあると思われます。

編集4

ええ、私たちはあなたの新しいjsFiddleの問題を切り分けました。このバージョンのトップ2を微調整しました：http：//jsfiddle.net/C3gQb/4/-そしてこれら2つは現在機能しています：

$(function(){
    $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });
});
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<h3>Version Information:</h3>
<div class="tabbable tabs-left">
  <ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active">
      <a href="#project-src-Graph-Graph-pm__0" data-toggle="tab">9424</a>
    </li>
    <li>
      <a href="#project-src-Graph-Graph-pm__1" data-toggle="tab">9058</a>
    </li>
    <li>
      <a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a>
    </li>
    <li>
      <a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a>
    </li>
    <li>
      <a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a>
    </li>
    <li>
      <a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a>
    </li>
    <li>
      <a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a>
    </li>
    <li>
      <a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="project-src-Graph-Graph-pm__0">
      <p>
        Author: joe<br>
        Version: v9424 (1:31 pm February 28, 2013)<br>
        Action: Modified<br>
        Message: Finalized a bit of the code... should be better now.<br>
      </p>
    </div>
    <div class="tab-pane" id="project-src-Graph-Graph-pm__1">
      <p>
        Author: joe<br>
        Version: v9058 (9:13 pm February 26, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br>
      </p>
    </div>
    <div class="tab-pane" id="project/src/Graph/Graph.pm__2">
      <p>
        Author: joe<br>
        Version: v8928 (2:08 am February 25, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br>
      </p>
    </div>
    <div class="tab-pane" id="project/src/Graph/Graph.pm__3">
      <p>
        Author: joe<br>
        Version: v8926 (1:14 am February 25, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br>
      </p>
    </div>
    <div class="tab-pane" id="project/src/Graph/Graph.pm__4">
      <p>
        Author: joe<br>
        Version: v8924 (10:26 pm February 24, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br>
      </p>
    </div>
    <div class="tab-pane" id="project/src/Graph/Graph.pm__5">
      <p>
        Author: joe<br>
        Version: v8890 (9:59 pm February 23, 2013)<br>
        Action: Modified<br>
        Message: Hello, world!<br>
      </p>
    </div>
    <div class="tab-pane" id="project/src/Graph/Graph.pm__6">
      <p>
        Author: joe<br>
        Version: v8889 (9:53 pm February 23, 2013)<br>
        Action: Added<br>
        Message: Hello, world!<br>
      </p>
    </div>
    <div class="tab-pane" id="project/src/Graph/Graph.pm__7">
      <p>
        Author: joe<br>
        Version: v8887 (9:40 pm February 23, 2013)<br>
        Action: Added<br>
        Message: Hello, world!<br>
      </p>
    </div>
  </div>
</div>

于 2013-03-07T03:18:28.380 に答える
1

古いバージョンのjQueryを参照していることがわかります。アップグレードできます1.9.xか？古いバージョンのjQueryで動作しているとは思いません。

また、これを試してください：

<script type="text/javascript" src="public/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $('.nav-tabs').tab();
});
</script>

またbootstrap.min.js、関数の前に移動してください。

于 2013-03-07T03:23:44.797 に答える
1

ブートストラップのバージョンを確認するだけです...v2.3.1+である必要があります

于 2017-04-03T11:00:36.630 に答える