I am trying to use JQuery so that a user can click the next/previous buttons to switch tabs as well as click the tabs themselves (this is the normal functionality of these tabs). This is in Bootstrap 5.
Issue: : Clicking next/previous buttons switches tabs but not tab content.
<div class="gradient-bg pb100">
<div class="tab-container">
<button id="next">Next</button>
<button id="previous">Previous</button>
<ul class="nav nav-tabs" role="tablist" id="shoppingTabs">
<li class="nav-item">
<a class="nav-link active" id="books-tab" data-index="1" data-bs-toggle="tab" data-bs-target="#books" type="button" role="tab">Shop Books</a>
</li>
<li class="nav-item">
<a class="nav-link" id="courseware-tab" data-index="2" data-bs-toggle="tab" data-bs-target="#courseware" type="button" role="tab">Shop Courseware</a>
</li>
<li class="nav-item">
<a class="nav-link" id="prep-tab" data-index="3" data-bs-toggle="tab" data-bs-target="#prep" type="button" role="tab" >Shop Test Prep</a>
</li>
<li class="nav-item">
<a class="nav-link" id="trending-tab" data-index="4" data-bs-toggle="tab" data-bs-target="#trending" type="button" role="tab" >Shop Imprints</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="books">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image1.jpg" alt="Couple holding hands." />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Do you want to setup an appointment today?</h5>
</div>
</div>
</div>
<div class="tab-pane fade" id="courseware">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image2.png" alt="Man flying in airplane." />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Keep your helth your number one priority.</h5>
</div>
</div>
</div>
<div class="tab-pane fade" id="prep">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image3.png" alt="Child walking a dog. " />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Ensure you're getting the care and attention you deserve.</h5>
</div>
</div>
</div>
<div class="tab-pane fade" id="trending">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image4.png" alt="Woman at the doctor." />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Flexible pricing.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
- You also need to set which tab content is active, try this:
<div class="gradient-bg pb100">
<div class="tab-container">
<button id="next">Next</button>
<button id="previous">Previous</button>
<ul class="nav nav-tabs" role="tablist" id="shoppingTabs">
<li class="nav-item">
<a class="nav-link active" id="books-tab" data-index="1" data-bs-toggle="tab" data-bs-target="#books" type="button" role="tab">Shop Books</a>
</li>
<li class="nav-item">
<a class="nav-link" id="courseware-tab" data-index="2" data-bs-toggle="tab" data-bs-target="#courseware" type="button" role="tab">Shop Courseware</a>
</li>
<li class="nav-item">
<a class="nav-link" id="prep-tab" data-index="3" data-bs-toggle="tab" data-bs-target="#prep" type="button" role="tab" >Shop Test Prep</a>
</li>
<li class="nav-item">
<a class="nav-link" id="trending-tab" data-index="4" data-bs-toggle="tab" data-bs-target="#trending" type="button" role="tab" >Shop Imprints</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="books" data-index="1">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image1.jpg" alt="Couple holding hands." />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Do you want to setup an appointment today?</h5>
</div>
</div>
</div>
<div class="tab-pane fade" id="courseware" data-index="2">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image2.png" alt="Man flying in airplane." />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Keep your helth your number one priority.</h5>
</div>
</div>
</div>
<div class="tab-pane fade" id="prep" data-index="3">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image3.png" alt="Child walking a dog. " />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Ensure you're getting the care and attention you deserve.</h5>
</div>
</div>
</div>
<div class="tab-pane fade" id="trending" data-index="4">
<div class="row align-items-center">
<div class="col-md-6">
<img src="images/home/image4.png" alt="Woman at the doctor." />
</div>
<div class="col-md-6 mt-4 mt-md-0">
<h5>Flexible pricing.</h5>
</div>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
var shoppingTabs = $("#shoppingTabs");
var tabContent = $('.tab-content');
var oCuurentActive, NextID, PreviousID;
$('#next').on('click', function(event) {
oCuurentActive = $("#shoppingTabs li > a.active");
NextID = (parseInt($(oCuurentActive).attr('data-index')) + 1);
$(shoppingTabs).find("li a").addClass('disabled');
$(shoppingTabs).find("li a").removeClass('active');
$(shoppingTabs).find("li a[data-index='" + NextID + "']").removeClass("disabled").addClass('active');
$(tabContent).find(".tab-pane").removeClass("show active");
$(tabContent).find(".tab-pane[data-index='" + NextID + "']").addClass("active show");
});
$('#previous').on('click', function(event) {
oCuurentActive = $("#shoppingTabs li > a.active");
console.log($(oCuurentActive).attr('data-index'));
PreviousID = (parseInt($(oCuurentActive).attr('data-index')) - 1);
$(shoppingTabs).find("li a").addClass('disabled');
$(shoppingTabs).find("li a").removeClass('active');
$(shoppingTabs).find("li a[data-index='" + (PreviousID) + "']").removeClass("disabled").addClass('active');
$(tabContent).find(".tab-pane").removeClass("show active");
$(tabContent).find(".tab-pane[data-index='" + PreviousID + "']").addClass("active show");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.