CMS에서 jQuery 탭이 제대로 작동하지 않는 이유는 무엇입니까?

jQuery로 간단한 탭을 만드는 방법

문제: jQuery를 사용하여 웹사이트에 탭을 구현했지만 작동하지 않습니다. 맞춤형 CMS 내에서 제대로 작동합니다. JavaScript가 없으면 탭이 점프 링크로 작동하지만 이를 사용하면 탭 내용이 표시되지 않습니다.

제공된 입력:

• HTML 탭 코드:

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

  로그인 후 복사

• jQuery 코드:

  <code class="javascript">$('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  ...</code>

  로그인 후 복사

수정된 솔루션:

제공된 솔루션에서는 탭의 href를 클릭하면 웹사이트가 다시 로드된다고 가정합니다. 이 문제를 해결하기 위해 href 속성이 제거되고 클릭 핸들러가 수정되었습니다.

업데이트된 jQuery:

<code class="javascript">$('#tabs li a').click(function() {
  var t = $(this).attr('id');

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

    $('.container').hide();
    $('#' + t + 'C').fadeIn('slow');
  }
});</code>

수정된 HTML 마크업:

<code class="html"><ul id="tabs">
  <li><a id="tab1">test1</a></li>
  <li><a id="tab2">test2</a></li>
  ...
</ul>
...
<div class="container" id="tab1C">1Some content</div>
...</code>

이러한 변경으로 인해 JavaScript 활성화 여부에 관계없이 탭을 클릭하더라도 웹사이트에서 탐색이 올바르게 처리됩니다.

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