通过jquery-ui选项卡排除ul中的li被视为选项卡

Question

我有一个标签列表（ul使用jquery-ui），我在整个页面上按宽度方式拉伸。在主题/标签区域的右上角（不在选项卡区域之外，但在其内部）我想要另一组导航，我希望以不同的方式进行主题化。

所以我做了另一个ul并将其嵌套在我的父ul中的最后一个li中。然后应用css覆盖应用于其余选项卡的jquery-ui主题。这有效，除了两件事： 1.）我希望这个嵌套列表和我的tabstrip中的最后一个真正的选项卡之间的差距随浏览器改变大小而缩小，如果它需要换行到底部（就像其他选项卡一样）。 2.）我的嵌套ul中的第一个li正在被视为它仍然是一个标签，所以当我点击它时，而不是它指向我指定的另一个页面（“/ Store / Admin /”）的链接href属性，jquery-ui推入“＃ui-tabs-1”并尝试回发到当前页面上不存在的锚点。我不知道“＃ui-tabs-1”来自何处，因为这甚至不是我的父UI / tab-list的命名约定???我没有任何嵌套列表被视为选项卡列表的一部分。

如果我需要取消嵌套其他ul并将其放在页面上的其他位置，那对我来说没问题......但是，我仍然希望它坐在我的tablist的右上角部分，我希望它用标签包装，这就是为什么我把它推到我父母ul的最后/最右边的那个。

有没有办法告诉jquery“不要把这个李当作标签”？

我页面上的代码如下所示：

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

Answer 1

您可以使用已禁用选项选择要排除的标签。

http://jqueryui.com/demos/tabs/

  

包含选项卡位置（从零开始的索引）的数组   应该在初始化时禁用。

例如：

$( "#tabs" ).tabs({ disabled: [1, 2] });

<强>更新

在我们的评论之后，我已经完成了一个解决方案的JSFiddle，它将子列表从选项卡列表中删除。

http://jsfiddle.net/spacebeers/G6WhC/17/