Why Are My Jump Links Not Working in My jQuery Tab Implementation?

How to Build Simple Tabs with jQuery: Troubleshooting Jump Link Issues

The issue presented relates to a jQuery implementation where jump links do not function as expected within a specific CMS. To address this problem, we explore an alternative solution that maintains functionality in the presence of JS.

Revised Code:

The updated jQuery code is as follows:

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

  if($(this).hasClass('inactive')){
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

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

Modified Markup:

The HTML markup has also been revised:

<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">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

Solution:

This revised code eliminates the issue with jump links by utilizing a different method for handling the click event. The id attribute of the anchor () is used to determine the target content div (identified by id attribute ending with C). This allows the desired content to be shown seamlessly both with and without JS enabled.

The above is the detailed content of Why Are My Jump Links Not Working in My jQuery Tab Implementation?. For more information, please follow other related articles on the PHP Chinese website!