通常、$（）。タブ（）は、タブページとカプセルリンクコンテンツフラグメントを切り替えるために、または関連するコンテンツのページナビゲーションに使用されます。
<ul id = "mytab"> <li> <a href = "＃home"> home </a> </li> <li> <a href = "＃profile">プロファイル</a> </li> <li> <a href = "＃messages">メッセージ</a> </li> <li> <a> <div </</</ id = "home"> </div> <div id = "profile"> ... </div> <div id = "messages"> ... </div> <div id = "settings"> ... </div> <script> $（$（ '＃mytab a：last'）。 e.PreventDefault（）; //リンク$（this）.tab（ 'show'）のジャンプ動作をブロック; //現在選択されているリンクと関連するコンテンツを表示}）}）</script>
さらに、特定のタブをアクティブにするためのより柔軟な方法を持つことができます。
$（ '＃mytab a [href = "＃profile"]'）。タブ（ 'show'）; // name $（ '＃mytab a：first'）。タブ（ 'show'）でタブを選択します。 // first tab $（ '＃mytab a：last'）。タブ（ 'show'）を選択します。 // last tab $（ '＃mytab li：eq（2）a'）。タブ（ 'show'）を選択します。
上記のコードで注意する必要があることの1つは、各LIのタグにhref =＃idが必要であり、リンクに対応するコンテンツのIDを指すことです。 JavaScriptを使用してナビゲーションコンテンツの切り替えに使用される場合、aタグにdata-toggle = 'tab'を追加する必要はありません。もちろん、各リンクAがこの属性を使用している場合、JSを使用して実装する必要はありません。