Develop Reference

How to get active tabpane id

I need to get the id of the active tab-pane every time that I change from tab to tab in my page and, depending on which tab-pane it is(tab-pane1,tab-pane2,tab-pane3), store(tab-pane1 = 1 and so on) in a variable and display it in the console.
Using vanilla JS or jQuery, both are fine.
my code looks like this
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
My jQuery looks like this.
console.log($(".tab-pane.active").attr("id"));

You can use class shown.bs.tab to get active tab number. Get active tab href attribute and slice to get desire result.
Example:
console.log($("a.active").attr("href").slice(-1)); // Get value when page load if needed
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
var result = $(e.target).attr("href").slice(-1); // get activ tab number
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-success" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#tab-pane1" role="tab" aria-selected="true">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane1
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane2" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-title">tab-pane2
</div>
</div>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#tab-pane3" role="tab" aria-selected="false" tabindex="-1">
<div class="d-flex align-items-center">
<div class="tab-icon">
</div>
<div class="tab-title">tab-pane3
</div>
</div>
</a>
</li>
</ul>
<div class="tab-content py-3">
<div class="tab-pane fade active show" id="tab-pane1" role="tabpanel">
<!-- content tab-pane1 -->
</div>
<div class="tab-pane fade" id="tab-pane2" role="tabpanel">
<!-- content tab-pane2 -->
</div>
<div class="tab-pane fade" id="tab-pane3" role="tabpanel">
<!-- content tab-pane3 -->
</div>
Note: there is not attribute id on anchor tag so why I catch href attribute and slice.

How to change the URL of an anchor tag based on current active tab?

I have two tabs, Google and Yahoo!. The goal is that if the 'Google' tab is active, then the plus sign icon (on the right) will contain the URL based on the conditional.
Example: If 'Google' tab is active, then clicking on the plus sign should open a google.com page.
I'm not sure what I'm doing wrong:
let activeTab = document.querySelector(".nav-tabs li.active");
let selectedForm = document.querySelector("#formSelector");
if (activeTab.textContent == "Google") {
selectedForm.setAttribute("onclick", "location.href='https://www.google.com'");
} else if (activeTab.textContent == "Yahoo!") {
selectedForm.setAttribute("onclick", "location.href='https://www.yahoo.com'");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>

I would recommend adding a click event listener on the button that checks the active tab and redirects accordingly:
let selectedForm = document.querySelector("#formSelector");
selectedForm.addEventListener('click', function() {
let activeTab = document.querySelector(".nav-tabs li.active");
if (activeTab.textContent.trim() == "Google") {
location.href = 'https://google.com'
} else {
location.href = 'https://yahoo.com'
}
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>

As Spectric said, moving the check to be based on click of a tab would be ideal.
Here's an alternative implementation (requires HTML & JS changes).
HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#google" related-url="https://google.com">Google</a>
</li>
<li>
<a data-toggle="tab" href="#yahoo" related-url="https://yahoo.com">Yahoo!</a>
</li>
<li class="pull-right">
<a id="formSelector" href="#!" target="_blank"><i class="fa fa-plus"></i></a>
</li>
</ul>
<div class="tab-content">
<div id="google" class="tab-pane fade in active">
<h3>Google</h3>
<p>This should change the plus sign icon to google.com</p>
</div>
<div id="yahoo" class="tab-pane fade">
<h3>Yahoo!</h3>
<p>This should change the plus sign icon to yahoo.com</p>
</div>
</div>
</div>
Javascript
<script>
const tabClick = document.querySelectorAll(".nav-tabs");
const selectedForm = document.querySelector("#formSelector");
tabClick.forEach((tabEl) => {
tabEl.addEventListener('click', (e) => {
console.log(tabEl);
console.log(e);
selectedForm.setAttribute('href', e.target.getAttribute('related-url'));
});
})
</script>

Bootstrap Tab pills not working or linking with tab panel

I have created a bootstrap pills in my website but its is not working the way its showed on documentation. when I click on the pill its not opening the specific tab panel. here am attaching the code.Here am tring to add tabs pills linking with specific contents below in divs. Don't know what am missing in the code but when i click on the tab the contents are not changing.
<script>
$(".nav li a").on("click", function() {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container">
<div class="text-center mt-5 pt-5">
<h1>Verbal Ability :: Comprehension</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!--Test Links-->
<div class="overflow-auto bg-light" style="height: 200px;">
<ol class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="pill">Comprehension - Section 3</a>
</li>
</ol>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
<div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
</div>
</main><!-- /.container -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

You should load jQuery before loading Bootstrap. Please read the docs properly.
Your script method of adding a class("active") was wrong. There is an inbuilt method provided by Bootstrap .tab("show") which then enables the tab to toggle properly as per the given ID's
I have changed the snippet and it's working now. Kindly go through this https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp to learn more in detail.
$(document).ready(function(){
$(".nav-item a").click(function(){
$(this).tab('show');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main role="main" class="container">
<div class="text-center mt-5 pt-5">
<h1>Verbal Ability :: Comprehension</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<!--Test Links-->
<div class="overflow-auto bg-light" style="height: 200px;">
<ol class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home" data-toggle="pill">Comprehension - Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#profile" data-toggle="pill">Comprehension - Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#third" data-toggle="pill">Comprehension - Section 3</a>
</li>
</ol>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade show active" role="tabpanel">Content 1</div>
<div id="profile" class="tab-pane fade" role="tabpanel">Content 2</div>
<div id="third" class="tab-pane fade" role="tabpanel">Content 3</div>
</div>
</main><!-- /.container -->
<!-- jQuery should come before loading boostrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

Replace the first tab with an active one (swap the tabs)

Is it possible to swap the first tab with an active one on click?
I have a simple Bootstrap tabs and broke my head trying to replace the first tab with an active one.
So that when I clicked on tab "D" it swaps places with tab "A".
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>bootstrap 4 vertical tabs</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A" role="tabpanel">A Content</div>
<div class="tab-pane" id="B" role="tabpanel">B Content</div>
<div class="tab-pane" id="C" role="tabpanel">C Content</div>
<div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>
</div>
My current JS knowledge is temporarily poor so I would really appreciate any help.

To achieve this you can use prependTo() to move the clicked tab to the first position in the list. You can see this working in the example below. I would strongly suggest you do not do this, as it's incredibly annoying behaviour and not clear to your users why tabs are moving around.
let $navlinks = $('.nav-link').on('click', e => {
$navlinks.removeClass('active');
$(e.target).prependTo('ul.nav');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>bootstrap 4 vertical tabs</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#A" role="tab" aria-controls="A">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#B" role="tab" aria-controls="B">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#C" role="tab" aria-controls="C">C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#D" role="tab" aria-controls="D">D</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="A" role="tabpanel">A Content</div>
<div class="tab-pane" id="B" role="tabpanel">B Content</div>
<div class="tab-pane" id="C" role="tabpanel">C Content</div>
<div class="tab-pane" id="D" role="tabpanel">D Content</div>
</div>
</div>

All Cards Not Getting Styled

I am attempting to make an example prototype that uses two cards from Bootstrap 4 to show the information from a form and hold the information from a second related form in the second card. Right now, it looks like this:
Here is a JSFiddle with the code which i've already taken the step of introducing a specific class and selector in the style tag.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>
div.card {
max-height: 50%;
min-height: 30%;
}
.wuformheader {
color: white;
padding-bottom: 0px;
background-color: blue;
}
ul.nav-tabs {
border-bottom: 0px;
}
div.card-header li.nav-item> a.active {
color: black;
background-color: white;
}
div.card-header li.nav-item> a {
color: white;
}
</style>
<title>Review Template</title>
</head>
<body>
<div class="card">
<div class="card-header wuformheader">
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-study-tab" data-toggle="tab" href="#study" role="tab" ari-controls="study" aria-selected="true">Study Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-dept-tab" data-toggle="tab" href="#dept" role="tab" ari-controls="dept" aria-selected="false">Department Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#contact" role="tab" ari-controls="contact" aria-selected="false">Contacts</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-lab-tab" data-toggle="tab" href="#lab" role="tab" ari-controls="lab" aria-selected="false">Laboratory</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-form-approvals-tab" data-toggle="tab" href="#formapprovals" role="tab" ari-controls="formapprovals" aria-selected="false">Approvals</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="nav-formTabContent">
<div class="tab-pane fade show active" id="study" role="tabpanel" aria-labelledby="nav-study-tab">
Study Tab!
</div>
<div class="tab-pane fade" id="dept" role="tabpanel" aria-labelledby="nav-dept-tab">
Department Tab!
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="nav-dept-tab">
Contacts Tab!
</div>
<div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="nav-dept-tab">
Labs!
</div>
<div class="tab-pane fade" id="formapprovals" role="tabpanel" aria-labelledby="nav-form-approvals-tab">
formapprovals!
</div>
</div>
</div>
</div>
<br/>
<div class="card">
<div="card-header wuformheader">
<ul class="nav nav-tabs" id="review-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-notes-tab" data-toggle="tab" href="#notes" role="tab" ari-controls="notes" aria-selected="true">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-criteria-tab" data-toggle="tab" href="#criteria" role="tab" ari-controls="criteria" aria-selected="false">Criteria</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-approvals-tab" data-toggle="tab" href="#reviewapprovals" role="tab" ari-controls="reviewapprovals" aria-selected="true">Approval</a>
</li>
</ul>
</div>
<div="card-body">
<div class="tab-content" id="nav-reviewTabContent">
<div class="tab-pane fade show active" id="notes" role="tabpanel" aria-labelledby="nav-notes-tab">
Notes tab
</div>
<div class="tab-pane fade" id="criteria" role="tabpanel" aria-labelledby="nav-criteria-tab">
Criteria Tab
</div>
<div class="tab-pane fade" id="reviewapprovals" role="tabpanel" aria-labelledby="nav-approvals-tab">
Approvals
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
What needs to change for both cards to have the correct (Top in the image) styling?

You have a typo in your html on line 83 in your jsfiddle:
<div="card-header wuformheader">
It should be:
<div class="card-header wuformheader">
You deleted the word "class"