I'm using Bootstrap v4.5.3, I'm trying to display an active tab in 2 sections, I searched for a better way to do this but I can't solve it so, could you please help with this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="row nogutters tab-content">
<div class="col mr-2 bg-secondary text-white">
<div class="col tab-pane fade show active" id="home"role="tabpanel" aria-labelledby="home-tab"> Home-1</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile-1</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact-1</div>
</div>
<div class="col mr-2 bg-secondary text-white">
<div class="col tab-pane fade show active" id="home"role="tabpanel" aria-labelledby="home-tab"> Home-2</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile-2</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact-2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
It seems it has to be done manually using jQuery and the events given by Bootstrap 4.
So mainly what I'm doing here is getting the data of the target element and the previous clicked tab element and doing multiple conditions to achieve the desired behaviour.
You can see the bootstrap event at the bottom of this page https://getbootstrap.com/docs/4.0/components/navs/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
let target = e.target // newly activated tab
let previous = e.relatedTarget // previous active tab
if(target.id === "profile-tab"){
// Remove active class from previous elements
if(previous.id === "home-tab"){
$('#home1').removeClass('show active')
$('#home2').removeClass('show active')
}
else{
$('#contact1').removeClass('show active')
$('#contact2').removeClass('show active')
}
// Add active class to target elements
$('#profile1').addClass('show active')
$('#profile2').addClass('show active')
}
if(target.id === "contact-tab"){
// Remove active class from previous elements
if(previous.id === "home-tab"){
$('#home1').removeClass('show active')
$('#home2').removeClass('show active')
}
else{
$('#profile1').removeClass('show active')
$('#profile2').removeClass('show active')
}
// Add active class to target elements
$('#contact1').addClass('show active')
$('#contact2').addClass('show active')
}
if(target.id === "home-tab"){
// Remove active class from previous elements
if(previous.id === "home-tab"){
$('#contact1').removeClass('show active')
$('#contact2').removeClass('show active')
}
else{
$('#profile1').removeClass('show active')
$('#profile2').removeClass('show active')
}
// Add active class to target elements
$('#home1').addClass('show active')
$('#home2').addClass('show active')
}
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="row nogutters tab-content">
<div class="col mr-2 bg-secondary text-white">
<div class="col tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab"> Home-1</div>
<div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">Profile-1</div>
<div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">Contact-1</div>
</div>
<div class="col mr-2 bg-secondary text-white">
<div class="col tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab"> Home-2</div>
<div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab">Profile-2</div>
<div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab">Contact-2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
Related
I have implemented tab using bootstrap, there are 3 tabs and each of them has contents in them, but while I am executing the code all the contents of active tab is not visible, content is visible only after any other tab is clicked, when checked on inspect element does not show active class.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
Content.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content.........
</div>
</div>
in inspect div element only shows three classes (class="tab-pane fade show") but not active class.
#conrad
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
add this script link to your shipify theme.liquid head section
<a class="nav-link active" id="all-tab" data-toggle="tab"
the data toggle need a unique id you do not mention it
you put the same data-toggle change relevant tab id
You need to add active class to li tag and add in class inside first div which you need to display
Demo Code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!--add active to li-->
<li class="nav-item active">
<a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<!--added class in-->
<div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
Content1.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content2.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content3.........
</div>
</div>
So I have been wracking my brain and googling skills and I've set to find a simple answer. I've found an alternative solution to what I was trying to achieve but it's bothering me that was I was initially was trying to do didn't work no matter what I did.
So here's what I have
I have a bootstrap progress bar and bootstrap nav-pills - shown using an image,
progress bar and tabs for visual aid
I am fairly new and I do struggle between the differences of JavaScript and jQuery but don't mind using either and sorry if I mixed and matched.
** I DON'T SET THE CLASSES TO ACTIVE - I'M ASSUMING BOOTSTRAP DOES **
When inspecting in the browser the active class changes from tab to tab when selected. I'm wanting to have a function that checks that its there and increased the width of the progress bar depending on the selected tab.
I have a solution but I wanted to know why none of this works ( if you want the solution I can edit and share a demo )
to call the class I've tried:
$().hasClass
$().className
$().classList.contains
to get the element that needs to be checked for the class I've tried
getElementById
document.querySelector
const pill1 = $()
const pill1 = getElementbyID
const pill = document.querySelector
Just having no luck
<div class="container">
<!-- PROGRESS BAR -->
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:10%">
</div>
</div>
<!-- PROGRESS BAR END -->
</div>
<div id="tabs" class="container">
<!-- TABS -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li id="pills-contactDetails-tab" class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="true">Contact Details</a>
</li>
<li id="pills-FAQ1-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ1" role="tab" aria-controls="pills-FAQ1" aria-selected="false">FAQ 1</a>
</li>
<li id="pills-FAQ2-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ2" role="tab" aria-controls="pills-FAQ2" aria-selected="false">FAQ 2</a>
</li>
<li id="pills-FAQ3-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ3" role="tab" aria-controls="pills-FAQ3" aria-selected="false">FAQ 3</a>
</li>
<li id="pills-FAQ4-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ4" role="tab" aria-controls="pills-FAQ4" aria-selected="false">FAQ 4</a>
</li>
<li id="pills-FAQ5-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ5" role="tab" aria-controls="pills-FAQ5" aria-selected="false">FAQ 5</a>
</li>
<li id="pills-FAQ6-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ6" role="tab" aria-controls="pills-FAQ6" aria-selected="false">FAQ 6</a>
</li>
<li id="pills-FAQ7-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ7" role="tab" aria-controls="pills-FAQ7" aria-selected="false">FAQ 7</a>
</li>
<li id="pills-FAQ8-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ8" role="tab" aria-controls="pills-FAQ8" aria-selected="false">FAQ 8</a>
</li>
<li id="pills-FAQ9-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ9" role="tab" aria-controls="pills-FAQ9" aria-selected="false">FAQ 9</a>
</li>
<li id="pills-requestCallBack-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-request" role="tab" aria-controls="pills-requestCallBack" aria-selected="false">Request Callback</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-contact" role="tabpanel" aria-labelledby="pills-contactDetails-tab">1</div>
<div class="tab-pane fade" id="pills-FAQ1" role="tabpanel" aria-labelledby="pills-FAQ1-tab">2</div>
<div class="tab-pane fade" id="pills-FAQ2" role="tabpanel" aria-labelledby="pills-FAQ2-tab">3</div>
<div class="tab-pane fade" id="pills-FAQ3" role="tabpanel" aria-labelledby="pills-FAQ3-tab">4</div>
<div class="tab-pane fade" id="pills-FAQ4" role="tabpanel" aria-labelledby="pills-FAQ4-tab">5</div>
<div class="tab-pane fade" id="pills-FAQ5" role="tabpanel" aria-labelledby="pills-FAQ5-tab">6</div>
<div class="tab-pane fade" id="pills-FAQ6" role="tabpanel" aria-labelledby="pills-FAQ6-tab">7</div>
<div class="tab-pane fade" id="pills-FAQ7" role="tabpanel" aria-labelledby="pills-FAQ7-tab">8</div>
<div class="tab-pane fade" id="pills-FAQ8" role="tabpanel" aria-labelledby="pills-FAQ8-tab">9</div>
<div class="tab-pane fade" id="pills-FAQ9" role="tabpanel" aria-labelledby="pills-FAQ9-tab">10</div>
<div class="tab-pane fade" id="pills-request" role="tabpanel" aria-labelledby="pills-requestCallBack-tab">11</div>
</div>
</div>
$(document).ready(function () {
$(".nav-item").click(progress());
});
function steps() {
const element = document.getElementById("#progressbar");
if ($("pills-contactDetails-tab").hasClass(".active")) {
element.style.width = "0%";
}
else if ($("#pills-FAQ1-tab").hasClass(".active")) {
element.style.width = "9.1%";
}
else if ($("#pills-FAQ2-tab").hasClass(".active")) {
element.style.width ="18.2%";
}
else if ($("#pills-FAQ3-tab").hasClass(".active")) {
element.style.width ="27.3%";
}
}
So you would use the show event on the tabs to make the progress bar change. also the element variable was null because it had '#progressbar' instead of 'progressbar'. The below example should run fine for you.
I would suggest to change the if elseif elseif in to a switch statement later.
$(document).ready(function() {
// $(".nav-item").click(progress());
$(".nav-link[data-toggle=pill]").on('shown.bs.tab', function(e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
var activeTabId = $(e.target).parent().attr('id');
console.log(activeTabId);
var element = document.getElementById("progressbar");
if (activeTabId == "pills-contactDetails-tab") {
element.style.width = "0%";
} else if ( activeTabId == "pills-FAQ1-tab") {
element.style.width = "9.1%";
} else if (activeTabId == "pills-FAQ2-tab") {
element.style.width = "18.2%";
} else if (activeTabId == "pills-FAQ3-tab") {
element.style.width = "27.3%";
}
})
});
function steps() {
const element = document.getElementById("#progressbar");
if ($("pills-contactDetails-tab").hasClass(".active")) {
element.style.width = "0%";
} else if ($("#pills-FAQ1-tab").hasClass(".active")) {
element.style.width = "9.1%";
} else if ($("#pills-FAQ2-tab").hasClass(".active")) {
element.style.width = "18.2%";
} else if ($("#pills-FAQ3-tab").hasClass(".active")) {
element.style.width = "27.3%";
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:10%">
</div>
</div>
<div id="tabs" class="container">
<!-- TABS -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li id="pills-contactDetails-tab" class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="true">Contact Details</a>
</li>
<li id="pills-FAQ1-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ1" role="tab" aria-controls="pills-FAQ1" aria-selected="false">FAQ 1</a>
</li>
<li id="pills-FAQ2-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ2" role="tab" aria-controls="pills-FAQ2" aria-selected="false">FAQ 2</a>
</li>
<li id="pills-FAQ3-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ3" role="tab" aria-controls="pills-FAQ3" aria-selected="false">FAQ 3</a>
</li>
<li id="pills-FAQ4-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ4" role="tab" aria-controls="pills-FAQ4" aria-selected="false">FAQ 4</a>
</li>
<li id="pills-FAQ5-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ5" role="tab" aria-controls="pills-FAQ5" aria-selected="false">FAQ 5</a>
</li>
<li id="pills-FAQ6-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ6" role="tab" aria-controls="pills-FAQ6" aria-selected="false">FAQ 6</a>
</li>
<li id="pills-FAQ7-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ7" role="tab" aria-controls="pills-FAQ7" aria-selected="false">FAQ 7</a>
</li>
<li id="pills-FAQ8-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ8" role="tab" aria-controls="pills-FAQ8" aria-selected="false">FAQ 8</a>
</li>
<li id="pills-FAQ9-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ9" role="tab" aria-controls="pills-FAQ9" aria-selected="false">FAQ 9</a>
</li>
<li id="pills-requestCallBack-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-request" role="tab" aria-controls="pills-requestCallBack" aria-selected="false">Request Callback</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-contact" role="tabpanel" aria-labelledby="pills-contactDetails-tab">1</div>
<div class="tab-pane fade" id="pills-FAQ1" role="tabpanel" aria-labelledby="pills-FAQ1-tab">2</div>
<div class="tab-pane fade" id="pills-FAQ2" role="tabpanel" aria-labelledby="pills-FAQ2-tab">3</div>
<div class="tab-pane fade" id="pills-FAQ3" role="tabpanel" aria-labelledby="pills-FAQ3-tab">4</div>
<div class="tab-pane fade" id="pills-FAQ4" role="tabpanel" aria-labelledby="pills-FAQ4-tab">5</div>
<div class="tab-pane fade" id="pills-FAQ5" role="tabpanel" aria-labelledby="pills-FAQ5-tab">6</div>
<div class="tab-pane fade" id="pills-FAQ6" role="tabpanel" aria-labelledby="pills-FAQ6-tab">7</div>
<div class="tab-pane fade" id="pills-FAQ7" role="tabpanel" aria-labelledby="pills-FAQ7-tab">8</div>
<div class="tab-pane fade" id="pills-FAQ8" role="tabpanel" aria-labelledby="pills-FAQ8-tab">9</div>
<div class="tab-pane fade" id="pills-FAQ9" role="tabpanel" aria-labelledby="pills-FAQ9-tab">10</div>
<div class="tab-pane fade" id="pills-request" role="tabpanel" aria-labelledby="pills-requestCallBack-tab">11</div>
</div>
</div>
I've directly copy pasted a code snippet from the Bootstrap 4 docs on vertical pills (https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior) into Codepen and I can't seem to get it to work.
Codepen: https://codepen.io/ajayns/pen/vQoPNW?editors=1011n
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical" data-tabs="tabs">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="tab" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="tab" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="tab" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">home</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">profile</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">messages</div>
</div>
Is there anything that I'm missing out or doing wrong? I've checked this with a local setup and getting the same issue.
You need to include bootstrap 4 css and js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical" data-tabs="tabs">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="tab" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="tab" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="tab" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">home</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">profile</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">messages</div>
</div>
There's an a inside the li elements. I want to add the current class to the related li when the user clicks on the a. However, I am not sure how it can be done.
$(".nav-link").on('click', function(e) {
$(this).parent().toggleClass('current');
})
.nav-item.current {
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" />
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
I tried to use toggle but it will mess up when I click the a link again. Please help me. Thank you.
codepen - https://codepen.io/rae0724/pen/pZNQMK
For some reasons, if i need the function to detect if .nav-link has class .active, then just add on the current class to parent? any ways I can make this happen?
See the updated function
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
$(this).parent().addClass('current');
})
I added $(".current").removeClass('current'); line.
You need to remove the current class from all the elements first, then add it again on the required element.
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
$(this).parent().addClass('current');
})
.nav-item.current {
width: 300px;
}
<link rel="stylesheet prefetch" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
Updated Answer(based on comments)
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
setTimeout(function() {
$(".active").parent().addClass('current');
}, 0);
})
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
setTimeout(function() {
$(".active").parent().addClass('current');
}, 0);
})
.nav-item.current {
width: 300px;
}
<link rel="stylesheet prefetch" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
Remove the class from all siblings and add to the active link,
use $(this).parent().addClass('current').siblings().removeClass('current'); to achieve it, please check the working example below.
$(".nav-link").on('click', function(e) {
$(this).parent().addClass('current').siblings().removeClass('current');
})
.nav-item.current {
width: 300px;
border-bottom: 2px solid green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
2 of the 4 tab.js examples aren't working for me in CodePen and a local html file. In the "nav" example the items in the dropdown stay active and can't be accessed again after clicking way. Same goes for all the items in the vertical tabs: https://codepen.io/DannyJoris/pen/MvqMEW
At first I thought maybe there's a bug in the provided code snippets, but the bugs persist even when I copy the markup of the working example using the inspector tool. That makes me think something is wrong in the way I include the Bootstrap files.
These are the included CDN files:
CSS:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
JavaScript:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js
Tested on macOS 10.12.6, Chrome 60 & Firefox 55
Edit: it does work when using Bootstrap 3.3.7: https://codepen.io/DannyJoris/pen/VzEZmw, so it must be a bug in Bootstrap.
If your issue is related to the vertical and pills I may suggest to add the following handlers:
$('.nav-pills > a').on('shown.bs.tab', function (e) {
$(this).siblings().removeClass('active');
})
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e) {
$(this).siblings().find('.active').removeClass('active');
})
Remember: the IDs must be unique (refer: myTab)
$('.nav-pills > a').on('show.bs.tab', function (e) {
$(this).siblings().removeClass('active');
})
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e) {
$(this).siblings().find('.active').removeClass('active');
})
#v-pills-tab {
float: left;
display: inline-block;
width: 50%;
}
#v-pills-tabContent {
float: left;
display: inline-block;
width: 50%;
}
.container {
margin-top: 30px;
margin-bottom: 30px;
}
h2 {
margin: 15px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- ul -->
<h2>ul</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">#fat</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">#mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2...</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">3...</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">4...</div>
</div>
<!-- nav -->
<h2>nav</h2>
<nav class="nav nav-tabs" id="myTab1" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">#fat</a>
<a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">#mdo</a>
</div>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2...</div>
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">3...</div>
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">4...</div>
</div>
<!-- pills -->
<h2>pills</h2>
<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-expanded="true">Home</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-expanded="true">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">#fat</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">#mdo</a>
</div>
</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">1...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">2...</div>
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">3...</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">4...</div>
</div>
<!-- vertical -->
<h2>vertical</h2>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">1...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">2...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">3...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4...</div>
</div>
</div>
It looks like this is resolved in beta: https://github.com/twbs/bootstrap/issues/23708#issuecomment-325263323