

bootstrapでタブをクリックしたらAjax機能で画面遷移せずにデータを表示したいです。

[code]

    <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#home" data-toggle="tab">ホーム</a></li>
      <li ><a href="#profile" data-toggle="tab"> メニューＡ</a></li>
      <li ><a href="#messagaes" data-toggle="tab"> メニューＢ</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="home">
        <h2>スライドによる学習</h2>
        スライドを見て知識を習得します。<br>
        図を用いた説明により、直感的理解をすることができます。<br>
        自分のスピードで学習ができ、必要な時にいつでも見返すことが出来ます。
      </div>
      <div class="tab-pane" id="profile">
        <h2>オンラインエディタでの演習</h2>
        スライドで得た知識をオンラインエディタでの演習によって身につけます。<br>
        プログラミングはコードを書くことによってはじめて上達します。<br>
        インストラクションに従ってコーディングしていきましょう。
      </div>
      <div class="tab-pane" id="messagaes">
        <h2>プレビューで結果を確認</h2>
        エディタに書いたコードの結果をすぐに確認することができます。<br>
        これにより自分の書いたコードにより何が起きたのかを理解しながら<br>
        進めることが出来ます。
      </div>
    </div>
    
[/code]


CC BY-SA 3.0
2015-05-15T04:36:05.737
10211
2015-09-13T00:16:02.503
2015-05-15T08:49:21.057
2494
9476
question
bootstrap ajax
bootstrapでタブをクリックしたらAjax機能で画面遷移せずにデータを表示したい


タイトル通りであれば、[bootstrap tab
ajax](https://www.google.co.jp/search?q=bootstrap%20tab%20ajax)
で検索すると沢山出てきました。

その中に本家にもありましたので、諸々ご参考にされると宜しいかと思います。

[How to use AJAX loading with Bootstrap tabs? - Stack
Overflow](https://stackoverflow.com/questions/8456974/how-to-use-ajax-loading-
with-bootstrap-tabs)

ただ、コードを拝見すると、  
**表示する内容は同じHTML上に記載されており、表示・非表示を切り替えるだけ**  
のようにも読み取れます。

もしそうであれば、タイトルを変更されると、適切な回答がされると考えます。


CC BY-SA 3.0
2015-05-15T14:35:50.327
10237
2015-05-15T14:35:50.327
2017-05-23T12:38:55.307
-1
7471
10211
answer


Bootsrapのtabコンポーネントは、タブ形式の表示と、JavaScript(jQuery)を使った機能に分割しています。

<http://getbootstrap.com/javascript/#tabs-usage>

公式サイトのサンプルコードでは、

[code]

    $('#myTabs a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
    
[/code]

となっています。これは tabコンポーネントを構成している divが id="myTabs" で記載されていることが必要です。

そのため、

[code]

    <div class="tab-content">
    
[/code]

を

[code]

    <div class="tab-content" id="myTabs">
    
[/code]

としましょう。


CC BY-SA 3.0
2015-08-13T23:19:26.680
14401
2015-08-13T23:19:26.680
5778
10211
answer