我的網頁上有一個 bootstrap 5 選項卡串列，它有一些自定義代碼，允許單擊左/右箭頭來更改選項卡。如果我想添加帶有新 ID 的第二個 bootstrap 5 標簽串列，我該如何編輯代碼以包含新 ID 并影響該標簽串列？
預期結果：每個選項卡串列上方都有自己的箭頭，僅影響其下方的選項卡串列，以便在單擊時切換下一個/上一個選項卡。
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();
}
});
});
uj5u.com熱心網友回復：
關于 jQuery DOM 遍歷的一般想法總是從點擊目標開始......找到最接近的相關父級，它是模式的“根”，并在其中找到我們想要的模式的元素。
仔細看看點擊處理程式。
在 DOM 遍歷中，我們通常使用類（或使用屬性選擇器，使用型別，屬性，如名稱、aria-x、data-x 等），但使用 ID 的神經......它們用于 UNIQUE 元素。而唯一性不是可以在“重復”的 DOM 結構模式中計算的。
看看那個難看的演示（因為我今天對 CSS 感到很懶惰）。它應該按照您的意愿行事。
console.clear()
$(document).ready(function () {
$(".next").on("click", function (event) {
let nav = $(this).closest(".tab-container").find(".nav")
let nav_links = nav.find(".nav-link");
let link_count = nav_links.length;
let navLink_active_index = nav.find(".nav-link.active").parent().index();
nav_links.eq( (navLink_active_index 1) % link_count )[0].click()
});
$(".previous").on("click", function (event) {
let nav = $(this).closest(".tab-container").find(".nav")
let nav_links = nav.find(".nav-link");
let link_count = nav_links.length;
let navLink_active_index = nav.find(".nav-link.active").parent().index();
nav_links.eq( (navLink_active_index - 1) % link_count )[0].click()
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 previous">
<img src="/2022-assets/images/icons/left-arrow.svg" alt="Right Arrow" class="left-arrow">
</a>
<a class="d-inline-block ms-2 next">
<img src="/2022-assets/images/icons/right-arrow.svg" alt="Left Arrow" class="left-arrow">
</a>
</div>
</div>
<ul class="nav nav-tabs" role="tablist" class="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 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>Some other Products</h2>
</div>
<div class="col-6 tab-container-arrows text-end pe-4">
<a class="d-inline-block me-2 previous">
<img src="/2022-assets/images/icons/left-arrow.svg" alt="Right Arrow" class="left-arrow">
</a>
<a class="d-inline-block ms-2 next">
<img src="/2022-assets/images/icons/right-arrow.svg" alt="Left Arrow" class="left-arrow">
</a>
</div>
</div>
<ul class="nav nav-tabs" role="tablist" class="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_UNIQUEID">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_UNIQUEID">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_UNIQUEID">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_UNIQUEID">Shop Popular Items</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="software_UNIQUEID">
<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_UNIQUEID">
<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_UNIQUEID">
<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_UNIQUEID">
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/375584.html
標籤：javascript 查询 推特引导
上一篇：如何使懸停全寬