首頁 > web前端 > css教學 > 主體

為什麼我的 jQuery 選項卡在 CMS 中無法正常運作?

DDD
發布: 2024-10-25 12:04:30
原創
881 人瀏覽過

Why Are My jQuery Tabs Not Working Properly in My CMS?

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

問題:您已經使用jQuery 在網站上實現了選項卡,但它們不起作用正確地在定制的CMS 中。如果沒有 JavaScript,選項卡將充當跳躍鏈接,但有了 JavaScript,選項卡內容不會顯示。

提供的輸入:

  • HTML選項卡碼:

    <code class="html"><ul id="tabs">
    <li><a href="#tab1">test1</a></li>
    <li><a href="#tab2">test2</a></li>
    ...
    </ul>
    ...
    <div class="container" id="tab1">Some content</div>
    ...</code>
    登入後複製
  • <code class="javascript">$('#tabs li a:not(:first)').addClass('inactive');
    $('.container').hide();
    $('.container:first').show();
    ...</code>
    登入後複製
  • 修改後的解決方案:

提供的解決方案假設點擊選項卡的href 會重新載入網站。為了解決這個問題,href 屬性已被刪除,並且點擊處理程序已被修改:

更新了jQuery:

修訂的HTML標記:
<code class="javascript">$('#tabs li a').click(function() {
  var t = $(this).attr('id');

  if ($(this).hasClass('inactive')) { // Start of the condition
    $('#tabs li a').addClass('inactive');
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#' + t + 'C').fadeIn('slow');
  }
});</code>
登入後複製

透過這些更改,無論您點擊啟用或未啟用JavaScript 的選項卡,網站都會正確處理導航。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板