【发布时间】：2022-01-11 07:20:54
【问题描述】：
我的网页上有一个 bootstrap 5 选项卡列表，它有一些自定义代码，允许单击左/右箭头来更改选项卡。如果我想添加第二个具有新 ID 的 bootstrap 5 tablist，如何编辑我的代码以包含新 ID 并影响该 tablist？
预期结果：每个标签列表上方都有自己的箭头，仅影响其下方的标签列表，以便在单击时切换下一个/上一个标签。
HTML：
<div>
<div class="tab-container">
<div class="row">
<div class="col-6 col-sm-12 title-text variation-one mb-3 mb-lg-0 ps-4">
<h2>Learning Products</h2>
</div>
<div class="col-6 tab-container-arrows text-end pe-4">
<a class="d-inline-block me-2" id="previous">
<img src="/assets/images/icons/left-arrow.svg" alt="Right Arrow" class="left-arrow">
</a>
<a class="d-inline-block ms-2" id="next">
<img src="/assets/images/icons/right-arrow.svg" alt="Left Arrow" class="left-arrow">
</a>
</div>
</div>
<ul class="nav nav-tabs" role="tablist" id="learningTabs" aria-owns="software-tab courses-tab accessories-tab popular-tab">
<li class="nav-item" role="tab">
<a class="nav-link active" id="software-tab" data-index="1" data-bs-toggle="tab" data-bs-target="#software">Shop Software</a>
</li>
<li class="nav-item" role="tab">
<a class="nav-link" id="courses-tab" data-index="2" data-bs-toggle="tab" data-bs-target="#courses">Shop Courses</a>
</li>
<li class="nav-item" role="tab">
<a class="nav-link" id="accessories-tab" data-index="3" data-bs-toggle="tab" data-bs-target="#prep">Shop Accessories</a>
</li>
<li class="nav-item" role="tab">
<a class="nav-link" id="popular-tab" data-index="4" data-bs-toggle="tab" data-bs-target="#popular">Shop Popular Items</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="software">
<div class="row align-items-center">
<div class="col-md-6">
<div class="image-container">
<div class="text-pill">
<span>Shop Software</span>
</div>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h3>What do you want to learn today?</h3>
<p>Buy or rent textbooks, learn new subjects and skills on your own, or get the materials to prep for tests and certifications. Our books cover a wide range of topics, from accounting to world languages.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="courses">
<div class="row align-items-center">
<div class="col-md-6">
<div class="image-container">
<div class="text-pill">
<span>Shop courses</span>
</div>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h3>Improve student outcomes and classroom learning.</h3>
<p>Buy our courses with learning technology you need to increase confidence in your classroom. Teaching and learning made easy. </p>
</div>
</div>
</div>
<div class="tab-pane fade" id="accessories">
<div class="row align-items-center">
<div class="col-md-6">
<div class="image-container">
<div class="text-pill">
<span>Shop Accessories</span>
</div>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h3>Review courses to help pass your next test.</h3>
<p>Get the materials you need to prep for tests and certifications. </p>
</div>
</div>
</div>
<div class="tab-pane fade" id="popular">
<div class="row align-items-center">
<div class="col-md-6">
<div class="image-container">
<div class="text-pill">
<span>Shop Imprints</span>
</div>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h3>Learn something new.</h3>
<p>Buy our popular items to help you learn a new skill or get training material. Our brands and imprints cover a wide range of titles.</p>
</div>
</div>
</div>
</div>
</div>
</div>
JS：
$(document).ready(function() {
var learningTabs = $("#learningTabs");
var currentActive, NextID, PreviousID;
$('#next').on('click', function(event) {
currentActive = $("#learningTabs li > a.active");
NextID = Math.min((parseInt($(currentActive).attr('data-index')) + 1), $("#learningTabs li").length);
if (NextID !== parseInt($(currentActive).attr('data-index'))) {
$(learningTabs).find("li a[data-index='" + NextID + "']")[0].click();
}
});
$('#previous').on('click', function(event) {
currentActive = $("#learningTabs li > a.active");
PreviousID = Math.max((parseInt($(currentActive).attr('data-index')) - 1), 1);
if (PreviousID !== parseInt($(currentActive).attr('data-index'))) {
$(learningTabs).find("li a[data-index='" + PreviousID + "']")[0].click();
}
});
});
【问题讨论】：
-
我建议您切换到对各种元素使用 Class 而不是 ID。通过这种方式，您可以拥有一个具有单个 ID 的父元素，然后识别属于该 ID 的子元素的特定按钮。
-
the specs 说每个id只能属于一个元素。
-
$('#next')将获得具有该 ID 的第一个元素。你可以有一千个... jQuery 不在乎。所以你必须让你的代码明确地针对一个元素。 -- POST HTML..肯定有办法。 -
如果下一个，上一个在 learningTabs 中，你可以做
learningTabs.find('#next').on..，但如果你有多个项目，你应该总是使用类（几乎总是这样） -
问题是......多个ID也用于其他元素？ ——大概吧。 -- 发布 HTML 以获得准确的建议。
标签： javascript jquery twitter-bootstrap