サイトで Javascript を使用してもかまわない場合、Bootstrap にはこれを行うための機能が組み込まれています。解決可能な ID ( など<div id="home">
) を持つターゲットがあることを確認してください。
このデザインで遭遇する最大の問題は、読み込み時にすべての「ページ」がレンダリングされることです。ユーザー入力に基づいて変化するものを作成する場合、大量の AJAX を使用する必要があることに気付きます。
ブートストラップ サイトから:
マークアップ
要素に data-toggle="tab" または data-toggle="pill" を指定するだけで、JavaScript を記述せずにタブまたはピル ナビゲーションを有効にすることができます。nav および nav-tabs クラスをタブ ul に追加すると、Bootstrap タブのスタイルが適用されます。
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>