Question

I have a tab list (ul using jquery-ui) that I have stretch width-wise across the entirety of the page. In the top-right corner of the themed/tab area (not outside of the tabbed area, but INSIDE of it) I want another set of navigation that I want themed differently.

So I made another ul and nested it in the last li in my parent ul. And then apply css to override the jquery-ui themes that get applied to the rest of the tabs. This works, except for two things:
1.) I want the gap between this nested list, and the last real tab in my tabstrip to shrink as the browser changes size, and if it needs to wrap to the bottom (like the rest of the tabs do).
2.) The first li in my nested ul is being treated like it’s still a tab, and so when I click on it, rather than it be a link to another page (“/Store/Admin/”) that I specify in the href property, jquery-ui shoves in “#ui-tabs-1” and tries to post back to an anchor on the current page that doesn’t exist. I don’t know where “#ui-tabs-1” came from because that’s not even my naming convention for my parent ul/tab-list??? I don’t any of the nested list to be treated as still part of the tab list.

If I need to un-nest the other ul and put it somewhere else on the page, that is fine with me… BUT, I still want it to be sitting in the top-right section of my tablist and I want it to wrap with the tabs, so that’s why I shoved it in the last/right-most li of my parent ul.

Is there a way to tell jquery “don’t treat this li as a tab”?

The code on my page looks something like:

<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

You could use the disabled option to select tabs to exclude.

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

An array containing the position of the tabs (zero-based index) that
should be disabled on initialization.

For example:

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

UPDATE

After our comments I’ve done a JSFiddle of a solution that takes the sub list out of the tabbed list.

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