Menu
I want to switch tabs when I select one of the options of the current tab. The next tab content does the switch but not the tab itself. I've followed this example jsfiddle.net/ah97fo5m/. But cant kind of implement with my code. What am I doing wrong here?
Thank you in advance.
Here's the code https://codepen.io/mahirq8/pen/RwNWdRp?editors=1010
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<div class="modal-body" id="tabs">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Year</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Make</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Model</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-vo-tab" data-toggle="pill" href="#pills-vo" role="tab" aria-controls="pills-vo" aria-selected="false">Version/Option</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" id="pills-location-tab" data-toggle="pill" href="#pills-location" role="tab" aria-controls="pills-location" aria-selected="false">Location</a>
</li> -->
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2020</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2019</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item nexttab">2018</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Acura</a></li>
<li><a href="#" class="list-group-item">Alfa</a></li>
<li><a href="#" class="list-group-item">Aston</a></li>
<li><a href="#" class="list-group-item">Audi</a></li>
<li><a href="#" class="list-group-item">BMW</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-XL</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-C</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-B</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Class-A</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="pills-vo" role="tabpanel" aria-labelledby="pills-vo-tab">
<div class="d-flex justify-content-center">
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Manual</a></li>
</ul>
<ul class="tire-selector">
<li><a href="#" class="list-group-item">Auto</a></li>
</ul>
</div>
</div>
<!-- <div class="tab-pane fade" id="pills-location" role="tabpanel" aria-labelledby="pills-location-tab">
<div class="d-flex justify-content-center">
<div class="form-inline">
<div class="input-group mx-3">
<input type="text" class="form-control" placeholder="Full Address or ZIP" aria-label="Full Address or ZIP" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button">Go</button>
</div>
</div>
<span>OR</span>
<button type="submit" class="btn btn-primary mx-3">Use Current Location</button>
</div>
</div>
</div> -->
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
<button type="button" class="btn btn-primary a-none"> <a href="{% url 'search' %}">Save & Search</a></button>
</div>
$("#tabs").tabs();
$(".nexttab").click(function() {
$("#tabs").tabs("select", this.hash);
});
# OR
$("#tabs").tabs();
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
555
If all you want to do is to switch the tab when one of the list item is selected, you need to just figure how to switch the css classes between the siblings.
I will take the example of switching between the year tab and the car brand tab.
First you need to assign some class(year-option in your example) to the li items which will be linked to a listener.
<ul class="tire-selector">
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item year-option">2018</a></li>
<li><a data-toggle="pill" href="#pills-profile" class="list-group-item year-option">2019</a></li>
.......
.......
</ul>
JS
$(".year-option").click(function() {
// first remove the active class from all the nav-links
$('.nav-link').removeClass('active');
// then apply active class on the target nav-link's id
$('#pills-profile-tab').addClass('active')
// same with the list containers, here you need to switch two classes
$('tab-pane').removeClass('show active')
$('pills-profile').addClass('show active')
});
When it comes to ui elements that shows and hides itself on some action, in most of the cases it will be because of some class(es) being added and removed. Just look for those classes and switch it between it's siblings.
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
