StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can make it simpler: Use right methods to do the job. You are not utilizing jquery ui tabs events /methods.</p> <pre><code>$("#main").tabs({ activate: function (event, ui) { // subscribe to tab activate var target = '.menu-link [data-target=#' + ui.newTab.attr('aria-controls') + ']'; // Get the ID of the tab activated. aria-controls on the rendered tab div will give the id of the tab anchor. so get the target as the menu link which has the data-target as that of the id of the current tab. addCurrent(target); // set up corresponding menu link } }); $('.menu-link a').click(function (e) { e.preventDefault(); // This is required to prevent the default action on click of an anchor tab. var target = $(this).data('target'); // Get the target repsective to the clicked menu. This is jquery data() to retreive data attribute value. $("#main").tabs("option", { //Use right method to do the job. set which tab to be opened by using the jquery ui tabs option overload. 'active': $(target).index() - 1 // set the index of the tab to be opened. Get the index using .index() on the target which is the tab anchor and set that as active. }); addCurrent(this); // set up style for the current menu link }); function addCurrent(elem) { $('.current'). // select the currently activated elements not($(elem) // but not this one if clicked on itself .closest('.menu-link') // get the closest(Use this instead of parent(), closest is recommended to parent) .addClass('current') // add the class to the new menu ).removeClass('current'); // remove from existing ones. } </code></pre> <p>Minor addition to your markup adding a data-target on your menu link to point to the tab:</p> <pre><code> <a href="" id="cat_link" data-target="#tabs-1">Category</a> </code></pre> <h3><a href="http://jsfiddle.net/P5zCZ/" rel="nofollow">Demo</a></h3> <p>References:</p> <ul> <li><a href="http://api.jqueryui.com/tabs/#event-activate" rel="nofollow">tabs.activate</a></li> <li><a href="http://api.jquery.com/closest/" rel="nofollow">closest()</a></li> <li><a href="http://api.jquery.com/index/" rel="nofollow">index()</a></li> <li><a href="http://api.jqueryui.com/tabs/#method-option" rel="nofollow">tab options</a></li> <li><a href="http://api.jquery.com/not/" rel="nofollow">.not()</a></li> </ul>

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