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></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>