同一頁面上的多個 jQuery 選項卡

Question

我正在嘗試讓同一頁面上的多個選項卡正常工作，而無需更改我的標記或樣式。

問題是單擊一個部分中的選項卡鏈接會刪除其他部分的內容

我看到有相同問題的其他問題，但我無法修改我的 HTML 或 CSS

// Change tab class and display content
$('.tabs-nav a').on('click', function (event) {
    event.preventDefault();

    $('.tab-active').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage .tab-content').hide();
    $($(this).attr('href')).show();
});

$('.tabs-nav a:first').trigger('click'); // Default   

JS小提琴

Answer 1

邏輯有幾個問題。

• 您需要將.current類添加到目標選項卡，而不是手動調用show() ，因為后者將應用內聯樣式，該樣式不會被刪除.current類覆蓋。
• 使用li:nth-child(1) a而不是a:first來獲取每個容器中的第a元素，而不是整個頁面中的第一個。
• 您需要從li刪除.tab-active類，而不是a 。
• 您的 CSS 需要在.tab-content和.tab-content.current包含隱藏/顯示選項卡內容的規則。

解決了這些問題后，代碼就可以工作了：

 $('.tabs-nav a').on('click', e => { e.preventDefault(); let $tabLink = $(e.target); let $div_container = $tabLink.closest('.wrap'); $div_container.find('li').removeClass('tab-active'); $div_container.find('.tab-content').removeClass('current'); let targetSelector = $tabLink.attr('href'); $tabLink.parent().addClass('tab-active'); $(targetSelector).addClass('current'); }); $('.tabs-nav li:nth-child(1) a').trigger('click');

 .tabs-nav { list-style: none; margin: 0; padding: 0; } .tabs-nav a { border-bottom: 5px #a6a6a6 solid; color: #a6a6a6; display: block; font-size: 18px; font-weight: 600; padding: 10px 40px; position: relative; text-align: center; text-transform: uppercase; } .tabs-nav .tab-active a { border-bottom-color: #000; color: var(--body-color); cursor: default; z-index: 1; } .tabs-nav li { float: left; } .tabs-stage { background-color: #fff; border-radius: 0 0 6px 6px; border-top: 5px #a6a6a6 solid; clear: both; /* margin-bottom: 20px; */ /* removed for this demo to save space */ padding: 10px 20px 20px; position: relative; top: -5px; width: 100%; } .tab-content { display: none; } .tab-content.current { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <section class="wrap"> <ul class="tabs-nav"> <li><a href="#tab11" rel="nofollow">Tab 1</a></li> <li><a href="#tab12" rel="nofollow">Tab 2</a></li> </ul> <div class="tabs-stage"> <div id="tab11" class="tab-content"> <h3>Tab 1 Content</h3> </div> <div id="tab12" class="tab-content"> <h3>Tab 2 Content</h3> </div> </div> </section> <section class="wrap"> <ul class="tabs-nav"> <li><a href="#tab21" rel="nofollow">Tab 1</a></li> <li><a href="#tab22" rel="nofollow">Tab 2</a></li> </ul> <div class="tabs-stage"> <div id="tab21" class="tab-content"> <h3>Tab 1 Content</h3> </div> <div id="tab22" class="tab-content"> <h3>Tab 2 Content</h3> </div> </div> </section>