為什麼我的選項卡在 CMS 中無法正常工作？

如何使用 jQuery 建立簡單的選項卡？

在網站上建立選項卡時，您可能會遇到跳轉連結在某些情況下不起作用的問題內容管理系統。這可能會導致選項卡式內容無法如預期顯示。要解決此問題，確保正確實作 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 中不起作用，因此選項卡式內容無法正確顯示。

要解決此問題，我們可以更改 href 屬性以使用 ID 而不是部分名稱。此外，我們需要更新 jQuery 程式碼以使用 id 屬性來顯示正確的選項卡內容。

這是更新的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 並調整jQuery 程式碼以使用id 屬性，我們可以確保使用者點擊選項卡時顯示正確的選項卡內容，即使在停用跳轉連結的情況下也是如此。

以上是為什麼我的選項卡在 CMS 中無法正常工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！