addClass to Parent

Question

HTML:

<div class="tabbed-section">
    <ul class="tabs">
        <li><a href="#tab-1">Tab 1</a><li>
        <li><a href="#tab-2">Tab 2</a><li>
    </ul>
    <div id="tab-1" class="panel">
        content 1
    </div>
    <div id="tab-2" class="panel">
        content 2
    </div>
</div>

jQuery:

    $('.tabbed-section .panel').hide();
    $('.tabbed-section .panel:first').show();
    $('.tabbed-section .tabs li:first').addClass('active');
    $('.tabbed-section .tabs li a').click(function () {
        $('.tabbed-section .tabs li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('.tabbed-section .panel').hide();
        $(currentTab).show();
        return false;
    });

I want add the active tab ID ("tab-1" for example) as a class to the "tabbed-section" div, and remove it ofcourse while another tab is active, how do I achieve this?

Many thanks!

Answer 1

This should do it, can't understand why you want to add the tab ID as an class to the parent, though:

$('ul.tabs a').click(function() {
    var tab_id = $(this).attr('href');
    $(this)
        .closest('div.tabbed-section')
        .attr('class', 'tabbed-section '+tab_id.replace('#', ''));

    $('.tabbed-section .panel').hide();
    $(tab_id).show();
    return false;
});
$('ul.tabs a:first').click();