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