Question

I have made a dropdown menu that uses tabs to display the specific content for each menu item.

This is the link to the jQuery tutorial I used for the tabbing functionality:
http://www.jacklmoore.com/notes/jquery-tabs

I have modified the code to suit my needs, but am having trouble finding a way to change the element which the ‘active’ class is applied too. For CSS styling reasons I want the ‘active’ class to be applied to the parent <li> of the <a> which it is currently being added too.

I have tried various solutions including the .parent(); method to no avail. Any advice here would be much appreciated.

Here’s a quick snippet of the code that handles adding the class:

// Keep track of which tab is active and it's associated content
var $active, $content, $links = $(this).find('li.activate-dropdown a');

// If the location.hash matches one of the links, use that as the active tab.
$active = $($links.filter('[rel="'+location.hash+'"]')[0]);
$active.addClass('active');
$content = $($active.attr('rel'));

EDIT:
Example live code – http://jsfiddle.net/jgfg7/3/

Answer 1

Use .closest('li') when you are removing or adding the class to $active.

See updated fiddle: http://jsfiddle.net/jgfg7/4/