2

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

<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</a></li>
  <li ><a href="#messagaes" data-toggle="tab"> メニューB</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>

2 件の回答 2

1

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

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

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

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

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

そのため、

<div class="tab-content">

<div class="tab-content" id="myTabs">

としましょう。

0

タイトル通りであれば、bootstrap tab ajax で検索すると沢山出てきました。

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

How to use AJAX loading with Bootstrap tabs? - Stack Overflow

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。