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:

<code class="html"><ul id="tabs">
  <li><a href="#tab1">test1</a></li>
  <li><a href="#tab2">test2</a></li>
  <li><a href="#tab3">test3</a></li>
  <li><a href="#tab4">test4</a></li>
</ul>
<div class="container" id="tab1">Some content</div>
<div class="container" id="tab2">Some content</div>
<div class="container" id="tab3">Some content</div>
<div class="container" id="tab4">Some content</div></code>

And the following jQuery code:

<code class="javascript">$('#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');    
}</code>

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:

<code class="html"><ul id="tabs">
  <li><a id="tab1">test1</a></li>
  <li><a id="tab2">test2</a></li>
  <li><a id="tab3">test3</a></li>
  <li><a id="tab4">test4</a></li>
</ul>
<div class="container" id="tab1C">Some content</div>
<div class="container" id="tab2C">Some content</div>
<div class="container" id="tab3C">Some content</div>
<div class="container" id="tab4C">Some content</div></code>

And the updated jQuery:

<code class="javascript">$('#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');
 }
});</code>

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.

The above is the detailed content of Why are my tabs not working correctly in my CMS and how can I fix them?. For more information, please follow other related articles on the PHP Chinese website!