A simple tabmenu implementation with jQuery

tabmenu.css

div.tabcontent {
  display:none;
}
div.active {
  display:block;
}

tabmenu.html

<!-- 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.js

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