I have a bootstrap 5 tablist on my webpage and it has some custom code that allows for clicking of left/right arrows to change tabs. If I want to add a second bootstrap 5 tablist with a new ID, how can I edit my code to include the new ID and affect that tablist as well?
Expected result: Each tablist has their own arrows above it that affect only the tablist below it to switch tabs next/previous when clicked.
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();
}
});
});
CodePudding user response：
The general idea about jQuery DOM traversing is always about starting from the click target... To find the closest relevant parent which wuold be the "root" of a pattern and in which to find the elements we want for this chunck of a pattern.
Have a close look at the click handlers.
In DOM tranversing, we usually work with classes (Or using attribute selectors, with types, attributes like name, aria-x, data-x, etc.), but nerver with IDs... Which are for UNIQUE elements. And unique is not something that can be acounted in a DOM structure pattern "repeated".
Have a look at that ugly looking demo (because I feel lazy today about CSS). It is supposed to behave as you wish.
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>