Databases
StackOverflow2013
Postsdbo
POLinking menu items and jQuery ui tabs together
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLinking menu items and jQuery ui tabs together
    text
    copied!<p>I am trying to link navigation menu items and jQuery tabs together. That means I have two submenu items just think those are <code>category</code> and <code>item</code> and also I have 2 tabs in my page, those are <code>My category</code> and <code>My Items</code>. </p> <p>What I am trying to do using this is I want to open <code>My category</code> tab when I click on the link <code>category</code> from submenu and vice versa. And also I want to open <code>My Item</code> tab when I click on the link <code>item</code> from the submenu and vice versa. </p> <p>I tried it doing with jQuery but can't get to work correctly. </p> <p>My HTML - </p> <pre><code>&lt;ul id="new-menu"&gt; &lt;li class="dropdown-holder" id=""&gt; &lt;a&gt;My Menu&lt;/a&gt; &lt;div class="dropdown"&gt; &lt;div class="menu-container"&gt; &lt;div class="menu-link"&gt; &lt;a href=""&gt;my sub menu 1&lt;/a&gt; &lt;/div&gt; &lt;div class="menu-link"&gt; &lt;a href=""&gt;my sub menu 2&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="dropdown-holder" id=""&gt; &lt;a&gt;Category &amp; Item&lt;/a&gt; &lt;div class="dropdown"&gt; &lt;div class="menu-container"&gt; &lt;div class="menu-link"&gt; &lt;a href="" id="cat_link"&gt;Category&lt;/a&gt; &lt;/div&gt; &lt;div class="menu-link"&gt; &lt;a href="" id="item_link"&gt;Item&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="main"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-1"&gt;Category&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tabs-2"&gt;Item&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="tabs-1"&gt; &lt;p&gt;On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your.&lt;/p&gt; &lt;/div&gt; &lt;div id="tabs-2"&gt; &lt;p&gt;On the Insert tab, the galleries include other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This is my jQuery: </p> <pre><code> function setCurrent(element) { $('div').removeClass('current'); $(element).parent().addClass('current'); } $('#cat_link').click(function() { $('#tabs-1').hide(); $('#tabs-2').show(); setCurrent(this); $('#ui-id-2').parent().removeClass('ui-tabs-active ui-state-active'); $('#ui-id-2').parent().addClass('ui-state-default ui-corner-top'); $('#ui-id-1').parent().removeClass('ui-state-default ui-corner-top'); $('#ui-id-1').parent().addClass('ui-tabs-active ui-state-active'); return false; }); $('#item_link').click(function() { $('#tabs-2').hide(); $('#tabs-1').show(); setCurrent(this); $('#ui-id-1').parent().removeClass('ui-tabs-active ui-state-active'); $('#ui-id-1').parent().addClass('ui-state-default ui-corner-top'); $('#ui-id-2').parent().removeClass('ui-state-default ui-corner-top'); $('#ui-id-2').parent().addClass('ui-tabs-active ui-state-active'); return false; }); </code></pre> <p>This is <a href="http://jsfiddle.net/qP8DY/11/" rel="nofollow">JS Fiddle</a> </p> <p>You can see it is working in some manner but not perfectly. Reverse order also not working. Reverse order mean I need to select submenu item according to clicks on tabs. </p> <p><strong>UPDATE -</strong> </p> <p>According to above JSFiddle</p> <ol> <li><p>If I click on category link from submenu category tab is opening but its content display from item tab. </p></li> <li><p>If I click on item link from submenu item tab is opening but its content from category tab.</p></li> </ol> <p>Hope someone will help me. </p> <p>Thank you. </p>
 

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