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?
Solution
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();
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow