我已經為此作業了一段時間，但找不到有效的解決方案。非常感謝任何幫助！
作業：您可以單擊下一步轉到每個選項卡，默認情況下僅顯示 5 個。
不作業：如果您單擊下一步，直到您進入服務，然后選擇“全部亮點”，則會添加 2 個更多選項卡（使用“分離（）”） - 單擊下一步時，它會添加 2 個選項卡并更新數字 4/ 7，但索引沒有更新，我得到這個錯誤：
Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
我認為這個錯誤與索引不正確有關——基本上，如果檢查了顏色，我需要添加一些東西來更新索引。我已經嘗試以許多不同的方式做到這一點，但它不起作用。
開發網站：#
Webflow || [];
Webflow.push(function () {
// For any tab-prev and tab-next clicks
$(".booking_component").on("click", ".tab-prev, .tab-next", function () {
// Get direction
var direction = $(this).hasClass("tab-prev") ? -1 : 1;
// Get the tab links
var tablinks = $(this).parent().find(".w-tab-menu");
// Get index of current tab link, add direction
var index = tablinks.find(".w--current").index() direction;
// If array out of bounds, click on the first
index = index >= tablinks.children().length ? 0 : index;
console.log("step index = " index);
var bookingStep = $("#stepNumber");
var tabNumber = index 1 "/" tablinks.children().length;
if (index === 0) {
bookingStep.text(tabNumber);
$(".booking-nav-btn.prev").css("visibility", "hidden");
}
if (index === 1) {
bookingStep.text(tabNumber);
$(".booking-nav-btn.prev").css("visibility", "visible");
$(".booking-nav-btn.prev").removeClass("hidden");
}
if (index === 2) {
bookingStep.text(tabNumber);
}
if (index === 3) {
bookingStep.text(tabNumber);
if (colorOption == true) {
//updateIndex;
}
}
if (index === 4) {
bookingStep.text(tabNumber);
if (colorOption == true) {
//updateIndex;
}
}
if (index === 5) {
bookingStep.text(tabNumber);
}
if (index === 6) {
bookingStep.text(tabNumber);
}
// Update tabs by triggering a "tap" event on the corresponding slide button
// if ($("[name='Colour']").is(":checked")) {
// // Check colour options
// index = 2;
// }
tablinks.find(".w-tab-link").eq(index).trigger("click");
});
// End click handler
});
});
uj5u.com熱心網友回復：
這是您正在尋找的通用版本，我相信它具有您想要的所有功能并且已經過充分評論。您應該能夠根據需要重新使用此代碼。我讓它更通用一點，這樣你就可以繼續添加新的標簽，它會繼續作業。
它具有自定義功能，可在更新頁腳之前檢查活動選項卡和選項卡總數。如果您在第一個或最后一個選項卡上，這也會隱藏導航按鈕。
id下一個和上一個按鈕共享一個共同的功能，該功能根據單擊按鈕的來識別它應該向前還是向后移動。該函式鏈接到公共的class .tab-navigation-button.
出于演示目的，包含一個添加通用選項卡的按鈕，它會id根據當前選項卡的數量自動添加唯一的內容。
// Add event to next button
$(".tab-navigation-button").click(function() {
// Find current active tab
current = $(".tab.active");
// Check if you clicked next or previous
if ($(this).attr("id") == "tab-next") {
// Activate next tab
$(".tab.active").next(".tab").addClass("active");
} else {
// Active pevious tab
$(".tab.active").prev(".tab").addClass("active");
}
// Check if more than one tab is activated
if ($(".tab.active").length > 1) {
// Remove original active tab
current.removeClass("active");
// Update footer
updateTabFooter();
}
});
// Add new tab button is clicked
$("#tab-new").click(function() {
// Get total number of tabs
total = $("#tab-wrapper").children(".tab").length 1;
// Add new tab
$("#tab-wrapper").append("<div id='tab-" total "' class='tab'>Tab " total "</div>");
// Update footer
updateTabFooter();
});
// Update footer
function updateTabFooter() {
// Get total number of tabs
total = $("#tab-wrapper").children(".tab").length;
// Get current active tab
var tab = $('.tab'),
current = tab.filter('.active'),
index = current.index('.tab');
// Update text
$("#total-tabs").text(total);
$("#current-tab").text(index 1);
// Show navigation buttons
$("#tab-next").show();
$("#tab-previous").show();
// Hide navigation buttons as needed
if (total == index 1) {
$("#tab-next").hide();
} else if (index == 0) {
$("#tab-previous").hide();
}
}
// Update footer at the start
updateTabFooter();.tab {
display: none;
}
.tab.active {
display: inherit;
}
#tab-footer {
padding: 12px 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab-wrapper">
<div id="tab-1" class="tab active">
Tab 1
</div>
<div id="tab-2" class="tab">
Tab 2
</div>
<div id="tab-3" class="tab">
Tab 3
</div>
<div id="tab-4" class="tab">
Tab 4
</div>
<div id="tab-6" class="tab">
Tab 5
</div>
</div>
<div id="tab-footer">
<button id="tab-previous" class="tab-navigation-button">Prev</button>
<span id="current-tab">N/A</span>/
<span id="total-tabs">N/A</span>
<button id="tab-next" class="tab-navigation-button">Next</button>
</div>
<button id="tab-new">New Tab</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/468854.html