How to build simple tabs with jQuery?

When creating tabs on a website, you may encounter issues with jump links not working in certain CMS systems. This can lead to the tabbed content not displaying as expected. To resolve this issue, it's important to ensure that the HTML and jQuery code are correctly implemented.

Let's consider the following HTML code:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

And the following jQuery code:

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
  var t = $(this).attr('href');
  $('#tabs li a').addClass('inactive');        
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
  return false;
})

if($(this).hasClass('inactive')){ //this is the start of our condition 
  $('#tabs li a').addClass('inactive');         
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');    
}

In this case, the issue seems to lie with the href attribute of the anchor tags. When the user clicks on a tab, the href attribute directs the browser to a specific section of the page using jump links. Since the jump links are not working in your CMS, the tabbed content is not being displayed correctly.

To fix this, we can change the href attribute to use an ID instead of a section name. Additionally, we need to update the jQuery code to use the id attribute to show the correct tab content.

Here's the updated HTML:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

And the updated jQuery:

$('#tabs li a').click(function() {
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'  t   'C').fadeIn('slow');
 }
});

By using IDs and adjusting the jQuery code to use the id attribute, we can ensure that the correct tab content is displayed when the user clicks on a tab, even when jump links are disabled.