jQuery 選項卡：如何從選項卡 div 將類添加到單獨的 UL 選項卡？

Question

我正在嘗試使用 jQuery 設置選項卡導航，而不使用 jQuery 選項卡 UI。 據我了解，當用戶單擊列表元素時，代碼

• 使用data-tab="X"獲取列表元素並添加 class current ，這將設置opacity: 1 （默認值：50%），
• 然后從選項卡內容部分中刪除current的 class 並顯示具有相同data-tab屬性的相應 div。

我試圖通過單擊按鈕來復制相同的過程。 這似乎有效，因為它從.tab-link類中刪除了當前的 class ，但沒有將當前的 class 添加到相應的ul.tabs li元素中。 這會產生令人困惑的用戶體驗，因為當用戶按下下一個/上一個按鈕時，不清楚哪個部分/選項卡是活動的/當前的。

單擊下一個和上一個按鈕時，如何將當前的 class 添加到相應的ul.tabs li中？ 這是 jQuery 問題還是 CSS 問題？

 $(document).ready(function () { $('ul.tabs li').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }); $('button.next-previous').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); $('li').find('ul:first').addClass('moveme'); $('html, body').animate({ scrollTop: $("#tabsNav").offset().top }, 2000); }); });

 :root { --darkgreen: #203631; --background: #f5f5f5; --pinkaccent: #f49393; --white: #fff; --black: #000; }.formButton { display: inline-block; border-radius: 4px; background-color: var(--pinkaccent); border: none; color: #ffffff; text-align: center; font: italic 600 18px var(--secondfont); padding: 1rem 2rem; margin-top: 10px; cursor: pointer; }.checkoutNumbers { width: 30px; height: 30px; } /*-------------------------------------------------------------- # My Account - Tabs --------------------------------------------------------------*/ /*/Links/buttons container /*/ ul.tabs { display: block; margin: 0 auto; text-align: center; padding: 0px; list-style: none; } /*/Login & Register Links/*/ ul.tabs li { background: none; text-align: center; color: var(--darkgreen); font-family: var(--mainfont); display: inline-block; padding: 10px 15px; margin: 0 auto; font-size: 2rem; opacity: 50%; cursor: pointer; } /*/Current and selected link/*/ ul.tabs li.current { opacity: 1; } /*/Content Class/*/.tab-content { display: none; padding: 15px; animation: fadeEffect 1.5s; } /*/Current Content Class/*/.tab-content.current { display: inherit; } /* Go from zero to full opacity */ @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="tabsNav"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1" data-tab=""> <span>Billing</span> </li> <li class="tab-link" data-tab="tab-2"> <span>Delivery<span> </li> <li class=" tab-link" data-tab="tab-3"> <span>Review &amp; Payment</span> </li> </ul> </div> <.--Tabs Content--> <div id="tab-1" class="tab-content current"> <p>Billing tab.</p> <button data-tab="tab-2" class="next-previous formButton checkout">Continue</button> </div> <div id="tab-2" class="tab-content"> <p>Delivery Tab</p> <button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button> <button data-tab="tab-1" class="next-previous formButton checkout">Back</button> </div> <div id="tab-3" class="tab-content"> <p>Payment tab.</p> </div>

Answer 1

您只需要 select 帶有您的 tab_id 的data-tab的 li，例如

$("*[data-tab=\"" + tab_id+"\"").addClass('current');

這將使用您創建的tab_id變量並查找將data-tab值設置為此的元素，例如data-tab="tab-2"

你可以看到它在這里工作：

 $(document).ready(function () { $('ul.tabs li').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }); $('button.next-previous').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); /* find the li that has a data-tab attribute matching this tab_id*/ $("*[data-tab=\"" + tab_id+"\"").addClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); $('li').find('ul:first').addClass('moveme'); $('html, body').animate({ scrollTop: $("#tabsNav").offset().top }, 2000); }); });

 :root { --darkgreen: #203631; --background: #f5f5f5; --pinkaccent: #f49393; --white: #fff; --black: #000; }.formButton { display: inline-block; border-radius: 4px; background-color: var(--pinkaccent); border: none; color: #ffffff; text-align: center; font: italic 600 18px var(--secondfont); padding: 1rem 2rem; margin-top: 10px; cursor: pointer; }.checkoutNumbers { width: 30px; height: 30px; } /*-------------------------------------------------------------- # My Account - Tabs --------------------------------------------------------------*/ /*/Links/buttons container /*/ ul.tabs { display: block; margin: 0 auto; text-align: center; padding: 0px; list-style: none; } /*/Login & Register Links/*/ ul.tabs li { background: none; text-align: center; color: var(--darkgreen); font-family: var(--mainfont); display: inline-block; padding: 10px 15px; margin: 0 auto; font-size: 2rem; opacity: 50%; cursor: pointer; } /*/Current and selected link/*/ ul.tabs li.current { opacity: 1; } /*/Content Class/*/.tab-content { display: none; padding: 15px; animation: fadeEffect 1.5s; } /*/Current Content Class/*/.tab-content.current { display: inherit; } /* Go from zero to full opacity */ @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="tabsNav"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1" data-tab=""> <span>Billing</span> </li> <li class="tab-link" data-tab="tab-2"> <span>Delivery<span> </li> <li class=" tab-link" data-tab="tab-3"> <span>Review &amp; Payment</span> </li> </ul> </div> <.--Tabs Content--> <div id="tab-1" class="tab-content current"> <p>Billing tab.</p> <button data-tab="tab-2" class="next-previous formButton checkout">Continue</button> </div> <div id="tab-2" class="tab-content"> <p>Delivery Tab</p> <button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button> <button data-tab="tab-1" class="next-previous formButton checkout">Back</button> </div> <div id="tab-3" class="tab-content"> <p>Payment tab.</p> </div>