Databases
StackOverflow2013
Postsdbo
POExclude li in ul from being treated as a tab by jquery-ui tabs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExclude li in ul from being treated as a tab by jquery-ui tabs
    text
    copied!<p><img src="https://i.stack.imgur.com/1jZ1z.png" alt="Picture of what I want, and that SORT OF works right now, but not fully"></p> <p>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.</p> <p>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.</p> <p>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.</p> <p>Is there a way to tell jquery "don't treat this li as a tab"?</p> <p>The code on my page looks something like:</p> <pre><code>&lt;article&gt; &lt;div id="tabs"&gt; &lt;nav&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#Parts" onclick="getTab('Parts');"&gt;Parts&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Categories" onclick="getTab('Categories');"&gt;Categories&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#Links" onclick="getTab('Links');"&gt;Links&lt;/a&gt;&lt;/li&gt; &lt;li class="untabbed"&gt; &lt;ul&gt; &lt;li&gt;[ &lt;a href="/Store/Admin"&gt;Admin&lt;/a&gt; |&lt;/li&gt; &lt;li&gt;&lt;a href="/Store/Order"&gt;Order&lt;/a&gt; |&lt;/li&gt; &lt;li&gt;&lt;a href="/Account/LogOff"&gt;Log off&lt;/a&gt; ]&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div id="Parts"&gt;&lt;/div&gt; &lt;div id="Categories"&gt;&lt;/div&gt; &lt;div id="Links"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/article&gt; ... &lt;script type="text/javascript"&gt; $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; }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload