CMS에서 탭이 제대로 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

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

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

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

<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>

그리고 다음 jQuery 코드도 있습니다.

<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>

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

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

업데이트된 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>

업데이트된 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>

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

위 내용은 CMS에서 탭이 제대로 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!