ページ全体に幅方向に拡大するタブリスト（jquery-uiを使用するul）があります。テーマ/タブ領域の右上隅（タブ領域の外側ではなく、その内側）に、別のテーマのナビゲーションセットが必要です。
そこで、別のulを作成し、それを親ulの最後のliにネストしました。次に、cssを適用して、残りのタブに適用されるjquery-uiテーマをオーバーライドします。これは、次の2つを除いて機能します。1。）このネストされたリストと、ブラウザのサイズが変更されたときにタブストリップの最後の実際のタブとの間のギャップを縮小し、下部に折り返す必要がある場合（残りの部分と同様）タブはそうです）。2.）ネストされたulの最初のliは、まだタブであるかのように扱われているため、クリックすると、で指定した別のページ（ "/ Store / Admin /"）へのリンクではありません。 hrefプロパティ、jquery-uiは「＃ui-tabs-1」を押し込み、存在しない現在のページのアンカーにポストバックしようとします。「＃ui-tabs-1」がどこから来たのかわかりません。s私の親のul/tab-listの命名規則すらありませんか？タブリストの一部として扱われるネストされたリストはありません。
他のulのネストを解除してページの別の場所に配置する必要がある場合は、それで問題ありません...しかし、タブリストの右上のセクションに配置したいので、タブでラップするので、親ulの最後/右端のliに押し込みました。
jqueryに「このliをタブとして扱わないでください」と伝える方法はありますか？
私のページのコードは次のようになります。
<article>
<div id="tabs">
<nav>
<ul>
<li><a href="#Parts" onclick="getTab('Parts');">Parts</a></li>
<li><a href="#Categories" onclick="getTab('Categories');">Categories</a></li>
<li><a href="#Links" onclick="getTab('Links');">Links</a></li>
<li class="untabbed">
<ul>
<li>[ <a href="/Store/Admin">Admin</a> |</li>
<li><a href="/Store/Order">Order</a> |</li>
<li><a href="/Account/LogOff">Log off</a> ]</li>
</ul>
</li>
</ul>
</nav>
<div id="Parts"></div>
<div id="Categories"></div>
<div id="Links"></div>
</div>
</article>
...
<script type="text/javascript">
$tabs = $('#tabs').tabs();
$('#tabs').tabs('select', 'Categories');
getTab('Categories');
function getTab(id) {
var url = '/Store/Home/GetTab/' + id;
var targetDiv = '#' + id;
$.get(url, null, function (result) {
$(targetDiv).html(result);
});
}
$.address.change(function (event) {
$('#tabs').tabs('select', window.location.hash)
});
$('#tabs').bind('tabsselect', function (event, ui) {
window.location.hash = ui.tab.hash;
});
</script>