jQuery로 간단한 탭을 만드는 방법은 무엇입니까?

웹사이트에서 탭을 만들 때 특정 환경에서 점프 링크가 작동하지 않는 문제가 발생할 수 있습니다. CMS 시스템. 이로 인해 탭 콘텐츠가 예상대로 표시되지 않을 수 있습니다. 이 문제를 해결하려면 HTML 및 jQuery 코드가 올바르게 구현되었는지 확인하는 것이 중요합니다.

다음 HTML 코드를 고려해 보겠습니다.

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

그리고 다음 jQuery 코드:

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

이 경우 문제는 앵커 태그의 href 속성에 있는 것 같습니다. 사용자가 탭을 클릭하면 href 속성은 점프 링크를 사용하여 브라우저를 페이지의 특정 섹션으로 안내합니다. CMS에서 점프 링크가 작동하지 않기 때문에 탭 콘텐츠가 올바르게 표시되지 않습니다.

이 문제를 해결하려면 섹션 이름 대신 ID를 사용하도록 href 속성을 변경할 수 있습니다. 또한 올바른 탭 콘텐츠를 표시하려면 id 속성을 사용하도록 jQuery 코드를 업데이트해야 합니다.

업데이트된 HTML은 다음과 같습니다.

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

그리고 업데이트된 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');
 }
});

ID를 사용하고 id 속성을 사용하도록 jQuery 코드를 조정하면 점프 링크가 비활성화된 경우에도 사용자가 탭을 클릭할 때 올바른 탭 콘텐츠가 표시되도록 할 수 있습니다.