在自訂 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. 實作
:

將更新的ery合併到您的程式碼中。 確保 HTML 中的 #tabX ID 和 #tabXC ID 相對應。 測試選項卡的功能。 透過遵循這些步驟，即使在自訂 CMS 中遇到跳躍連結問題，您也可以使用 jQuery 有效地建立簡單且實用的標籤。

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