I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version for learning purposes. The vertical tabs are functioning properly, but I also want the bottom links to behave the same way as the vertical navigation buttons - changing styling, including background color, etc. Additionally, there will be external links in the #footer section, so that needs to be considered as well.
Check out the JSFiddle here.
$(function(){
// Handling clicks on the vertical navigation on the left side of #content
$('#sidemenu a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('open')) {
// Do nothing since the link is already open
} else {
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
$(oldcontent).fadeOut('fast', function(){
$(newcontent).fadeIn('fast').removeClass('hidden');
$(oldcontent).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$(this).addClass('open');
}
});
// Handling clicks on the bottom links
$('#footer a').on('click', function(e){
e.preventDefault();
var oldcontent = $('#sidemenu a.open').attr('href');
var newcontent = $(this).attr('href');
// Check if $(this) element links to a tab content or external
if($(this).hasClass('open-tab')){
if (oldcontent == newcontent){
// If this tab is already open, do nothing to page
} else {
$('#content ' + String(oldcontent)).fadeOut('fast', function(){
$(newcontent).fadeIn('fast').removeClass('hidden');
$('#content ' + String(oldcontent)).addClass('hidden');
});
$('#sidemenu a').removeClass('open');
$('#sidemenu a ' + newcontent).addClass('open');
}
} else{
// Just use href link to whatever the element's href attribute is
window.open($(this).attr('href'));
}
});
});