Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple tabmenu implementation with jQuery
div.tabcontent {
display:none;
}
div.active {
display:block;
}
<!-- tab menu links -->
<ul class="tabMenu">
<li class='active'><a href="#tab_Content1">Tab 1</a></li>
<li><a href="#tab_Content2">Tab 2</a></li>
<li><a href="#tab_Content3">Tab 3</a></li>
<li><a href="#tab_Content4">Tab 4</a></li>
</ul>
<!-- tab contents -->
<div id="Content1" class="tabcontent active"> Tab 1 Content here... </div>
<div id="Content2" class="tabcontent"> Tab 2 Content here... </div>
<div id="Content3" class="tabcontent"> Tab 3 Content here... </div>
<div id="Content4" class="tabcontent"> Tab 4 Content here... </div>
$('.tabMenu a').click(function(event){
var element = $(this),
activeClassName = 'active',
target = element.attr('href').split('_')[1];
$('.tabcontent').removeClass(activeClassName);
$('#'+target).addClass(activeClassName);
$('.tabMenu li').removeClass(activeClassName);
element.parent('li').addClass(activeClassName);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.