0

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 に追加し、別のタブがアクティブな間にそれを削除したいのですが、どうすればこれを達成できますか?

4

1 に答える 1

0

これでうまくいくはずですが、タブ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();
于 2009-12-13T16:52:17.547 に答える