addClass a los Padres

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;
    });

Quiero añadir la pestaña Identificación activa ( "tab-1", por ejemplo) como una clase a la "sección con pestañas" div, y sacarlo por supuesto, mientras que otra pestaña está activo, ¿cómo lograr esto?

Answer 1

Esto debe hacerlo, no puede entender por qué quiere añadir la pestaña ID como una clase a los padres, sin embargo:

$('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();