将类添加到父类

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

我想将活动选项卡 ID（例如“tab-1”）作为类添加到“tabbed-section”div，并在另一个选项卡处于活动状态时将其删除，我该如何实现这一点？

Answer 1

这应该可以做到，但无法理解为什么要将选项卡 ID 作为类添加到父级：

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