需要 add/remove 个标签的标签系统。添加新标签时需要帮助更新索引？

Question

我已经为此工作了一段时间，但找不到有效的解决方案。非常感谢任何帮助！

有效：您可以单击“下一步”转到每个选项卡，默认情况下只显示 5 个。

不工作：如果您单击下一步直到进入服务，然后选择“完整的亮点”，则会添加另外 2 个选项卡（使用“detach()”）- 单击下一步时，它会添加 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
});

});

Answer 1

这是您正在寻找的通用版本，我相信它具有您想要的所有功能并且有完整的注释。您应该可以根据需要 re-purpose 此代码。我使它更通用一些，以便您可以继续添加新选项卡，它会继续运行。

它有一个自定义功能，可以在更新页脚之前检查活动标签和标签总数。如果您在第一个或最后一个选项卡上，这也会隐藏导航按钮。

下一个和上一个按钮共享一个共同的功能，该功能根据单击按钮的 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>

需要 add/remove 个标签的标签系统。添加新标签时需要帮助更新索引？

Tab system that needs to add/remove tabs. Need help to update the index when adding new tabs?

jquery

webflow