如何使用 jQuery 建立簡單的選項(xiàng)卡？

在網(wǎng)站上建立選項(xiàng)卡時(shí)，您可能會(huì)遇到跳轉(zhuǎn)連結(jié)在某些情況下不起作用的問題內(nèi)容管理系統(tǒng)。這可能會(huì)導(dǎo)致選項(xiàng)卡式內(nèi)容無法如預(yù)期顯示。要解決此問題，確保正確實(shí)作 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>

在這種情況下，問題似乎出在錨標(biāo)記的href屬性上。當(dāng)使用者點(diǎn)擊選項(xiàng)卡時(shí)，href 屬性會(huì)使用跳躍連結(jié)將瀏覽器導(dǎo)向到頁面的特定部分。由於跳轉(zhuǎn)連結(jié)在您的 CMS 中不起作用，因此選項(xiàng)卡式內(nèi)容無法正確顯示。

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

這是更新的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 並調(diào)整jQuery 程式碼以使用id 屬性，我們可以確保使用者點(diǎn)擊選項(xiàng)卡時(shí)顯示正確的選項(xiàng)卡內(nèi)容，即使在停用跳轉(zhuǎn)連結(jié)的情況下也是如此。

以上是為什麼我的選項(xiàng)卡在 CMS 中無法正常工作？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！