これらのタブは、履歴プラグインとAJAX効果のパワーを兼ね備えています。このように、ウェブサイトのグローバルナビゲーションを 構築することができることに注意してください。それはまた、全くJavaScriptをサポートしないブラウザでも動作します!
履歴機能が動作するように、タブ上でアンカーリンク(#で始まる)を使用します:
<!-- タブ --> <ul class="css-tabs"> <li><a href="ajax1.htm">Tab 1</a></li> <li><a href="ajax2.htm">Second tab</a></li> <li><a href="ajax3.htm">An ultra long third tab</a></li> </ul> </head> <body> <!-- 単一のペイン --> <div class="css-panes"> <div style="display:block"></div> </div>
ajax effectで、history プラグインを使用します:
$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax', history: true});