Bootstrap 3タブが正しく動作しない

-2

um私の夢によれば、私の夢ではタブが少ないはずですが、タブをクリックすると見出しタグとPタグではない内容しか表示されません code.please私はあなたがjQueryのリンクを欠落していたと思う、私は私の夢の:-DBootstrap 3タブが正しく動作しない

<div class="panel panel-default"> 
 
    <div class="panel-body tabs"> 
 
    <ul class="nav nav-pills" data-tabs="tabs"> 
 
     <li class="active"><a href="#tab1" data-toggle="tab1">Tab1</a> 
 
     </li> 
 
     <li><a href="#tab2" data-toggle="tab">Tab2</a> 
 
     </li> 
 
     <li><a href="#tab3" data-toggle="tab">Tab3</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane fade in active" id="tab1"> 
 
     <h4>Heading1</h4> 
 
     <p>text</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab2"> 
 
     <h4>Heading2</h4> 
 
     <p>text</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab3"> 
 
     <h4>Heading3</h4> 
 
     <p>text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-05-03 is_sa91

経由tabbableタブを有効にする必要がありますが、必ず、中JS＆jQueryのリンクをブートストラップCSSを追加します彼ブートストラップで作業しているときはいつでも –

私はそれらの事を追加しましたが、私はあなたの助けを借りて、ありがとうの結果を得るdidnt： –

私の答えは以下を実行します。それは動作しませんか？ –

を満たすために役立ちます。コードは機能します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-body tabs"> 
 
    <ul class="nav nav-pills" data-tabs="tabs"> 
 
     <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a> 
 
     </li> 
 
     <li><a href="#tab2" data-toggle="tab">Tab2</a> 
 
     </li> 
 
     <li><a href="#tab3" data-toggle="tab">Tab3</a> 
 
     </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane fade in active" id="tab1"> 
 
     <h4>Heading1</h4> 
 
     <p>text in p</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab2"> 
 
     <h4>Heading2</h4> 
 
     <p>text in p</p> 
 
     </div> 
 
     <div class="tab-pane fade" id="tab3"> 
 
     <h4>Heading3</h4> 
 
     <p>text in p</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出力：

出典

2016-05-03 15:09:12

いいえ私はそのjqueryのリンクを追加しました。それは私のために働いていませんとにかくdivタグはそのタブ内で動作します。助けてくれてありがとう。 :) –

ok ..しかし、上のスニペットはうまくいきませんでしたか？コードスニペットを実行します。 –

あなたのコードは完璧に動作します、idkは私のことについて間違っています。 –

あなたはJavaScriptを

<script> 
    $('.nav-pills a').click(function (e) { 
     e.preventDefault() 
     $(this).tab('show') 
    }) 
</script>

出典

2016-05-03 15:33:00 Kld

nope.still not works.anyway私はタブを見ることができますまた、見出しがPタグの内部。あなたの努力に感謝します。 :) –

Bootstrap 3タブが正しく動作しない

答えて

関連する問題