如何使用 jQuery 構(gòu)建簡(jiǎn)單的選項(xiàng)卡？

在網(wǎng)站上創(chuàng)建選項(xiàng)卡時(shí)，您可能會(huì)遇到跳轉(zhuǎn)鏈接在某些情況下不起作用的問題內(nèi)容管理系統(tǒng)。這可能會(huì)導(dǎo)致選項(xiàng)卡式內(nèi)容無法按預(yù)期顯示。要解決此問題，確保正確實(shí)現(xiàn) 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)用戶單擊選項(xiàng)卡時(shí)，href 屬性會(huì)使用跳轉(zhuǎn)鏈接將瀏覽器定向到頁面的特定部分。由于跳轉(zhuǎn)鏈接在您的 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 屬性，我們可以確保用戶單擊選項(xiàng)卡時(shí)顯示正確的選項(xiàng)卡內(nèi)容，即使在禁用跳轉(zhuǎn)鏈接的情況下也是如此。

以上是為什么我的選項(xiàng)卡在 CMS 中無法正常工作？如何修復(fù)它們？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！