在自訂 CMS 中建立 jQuery 選項卡時如何修復跳轉連結問題？

使用jQuery 建立簡單標籤：提示與故障排除

使用jQuery 建置標籤時，使用者在實作客製化時可能會遇到跳轉連結故障的問題內容管理系統。下面提供了解決此困境的全面解決方案。

初始代碼:

考慮小提琴中提供的代碼。 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')) {
  $('#tabs li a').addClass('inactive');
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
}

故障排除與解決方案:

1. Href 問題:
   網站可能會遇到困難，導致點擊後自動重新加載。這個問題可以透過使用 id 而不是 href 來解決。

2. 更新的HTML 標記:
   修改的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">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>

   登入後複製

3. 🎜>:
   更新的jQuery 部分:

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

   登入後複製

實作:

1. 實作
:
3. 實作
:

以上是在自訂 CMS 中建立 jQuery 選項卡時如何修復跳轉連結問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！