I am trying to keep selected tab active on page refresh. Important - i'm using bootstrap 5.1. I checked all the same questions for different versions, none of them worked.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</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>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
There is documentation for tabs: https://getbootstrap.com/docs/5.1/components/navs-tabs/#methods
I'm so sorry i dont know javascript yet but i will be gladness if u help me with this small thing.
you need to use js try this xample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keep Selected Bootstrap Tab Active on Page Refresh</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
</script>
</head>
<body>
<div class="m-3">
<ul class="nav nav-tabs" id="myTab">
<li class="nav-item">
Section A
</li>
<li class="nav-item">
Section B
</li>
<li class="nav-item">
Section C
</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade show active">
<h3>Section A</h3>
<p>Aliquip placeat salvia cillum iphone...</p>
</div>
<div id="sectionB" class="tab-pane fade">
<h3>Section B</h3>
<p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
</div>
<div id="sectionC" class="tab-pane fade">
<h3>Section C</h3>
<p>Nullam hendrerit justo non leo aliquet...</p>
</div>
</div>
</div>
</body>
</html>
Here is example how to use BS-5.1 nav pills with saving active pill id to Window.localStorage:
BTW, in Code Snippet localStorage doesn't work, so I've created example in CodePen:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</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>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
const pillsTab = document.querySelector('#pills-tab');
const pills = pillsTab.querySelectorAll('button[data-bs-toggle="pill"]');
pills.forEach(pill => {
pill.addEventListener('shown.bs.tab', (event) => {
const { target } = event;
const { id: targetId } = target;
savePillId(targetId);
});
});
const savePillId = (selector) => {
localStorage.setItem('activePillId', selector);
};
const getPillId = () => {
const activePillId = localStorage.getItem('activePillId');
// if local storage item is null, show default tab
if (!activePillId) return;
// call 'show' function
const someTabTriggerEl = document.querySelector(`#${activePillId}`)
const tab = new bootstrap.Tab(someTabTriggerEl);
tab.show();
};
// get pill id on load
getPillId();
Related
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.
I see examples on how to retain an active tab's focus after refreshing the browser in Bootstrap 4 and below, but nothing for Bootstrap 5.
I'm not able to use the examples from Bootstrap 4 when using Bootstrap 5 tabs.
HTML
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target=
"#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home tab content</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile tab content</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact tab content</div>
</div>
jQuery
$(document).ready(function(){
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab a[href="' + activeTab + '"]').tab('show');
}
});
https://jsfiddle.net/0czektof/2/
Bootstrap 5 changed a lot compared to Bootstrap 4.
Make use of the example from Bootstrap 5.
There are some errors in your code related to the fact that you used an example of an older version.
Your querySelector uses a-elements but your HTML makes use of button-elements.
You use a wrong attribute selector. Bootstrap 5 uses data-bs-toggle not data-toggle.
Bootstrap 5 doesn't add .tab() function anymore. It uses his own global object to manage stuff.
$(document).ready(function() {
$('button[data-bs-toggle="tab"]').on('click', function(e) {
try {
localStorage.setItem('activeTab', e.target.dataset.bsTarget);
} catch (e) {
console.log("localstorage is not allowed in code snippets here test it on jsfiddle");
}
});
try {
var activeTab = localStorage.getItem('activeTab');
} catch (e) {
console.log("localstorage is not allowed in code snippets here test it on jsfiddle");
}
if (activeTab) {
const triggerEL = document.querySelector(`button[data-bs-target="${activeTab}"]`);
if (triggerEl) {
bootstrap.Tab.getOrCreateInstance(triggerEL).show()
}
}
});
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home tab content</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile tab content</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact tab content</div>
</div>
Here is a working fiddle.
With bootstrap 5, I was never able to get the activated tab. according to their website I just get the ID of the first button, not the activated tab and nothing else.
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
alert(event.target.id) // newly activated tab
// event.relatedTarget // previous active tab
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
I need tabs ID once its related button is clicked.
Your script is only finding the first button[data-bs-toggle="tab"] you need to use document.querySelectorAll('button[data-bs-toggle="tab"]') then loop through the NodeList.
Edit
Selecting the actual active tab-pane element takes a little more legwork. The event.target and event.relatedTarget are the tab buttons and their data-bs-target attribute value is the selector for the associated tab-pane.
Checkout the updated snippet:
var tabEl = document.querySelectorAll('button[data-bs-toggle="tab"]')
//console.log(tabEl)
for (i = 0; i < tabEl.length; i++) {
tabEl[i].addEventListener('shown.bs.tab', function(event) {
const activated_pane = document.querySelector(event.target.getAttribute('data-bs-target'))
const deactivated_pane = document.querySelector(event.relatedTarget.getAttribute('data-bs-target'))
console.log(activated_pane.id)
// console.log(deactivated_pane.id)
// do stuff
activated_pane.append(' hello ' + activated_pane.id)
})
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"></script>
Here's the fiddle.
You are using querySelector, which selects only first element. Use querySelectorAll, which selects all the tabs.
/*
// Using Vanilla JS
var tabEl = document.querySelectorAll('button[data-bs-toggle="tab"]')
tabEl.forEach(function(el){
el.addEventListener('shown.bs.tab', function (event) {
alert(event.target.id) // newly activated tab
// event.relatedTarget // previous active tab
})
})
*/
/*
// Using jQuery
*/
$('button[data-bs-toggle="tab"]').on('click', function (e) { // here is the new selected tab id
var selectedTabId = e.target.id;
console.log('tab changed', selectedTabId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
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>
As it said here https://getbootstrap.com/docs/4.0/components/navs/#events I am using e.relatedTarget on shown.bs.tab event to get the previous active tab for adding some css. But e.relatedTarget is undefined. HTML-markup:
<ul class="nav nav-pills mb-3" id="itemTabs">
<li class="nav-item active">
<a class="nav-link" id="itemTabDescription" data-toggle="pill" href="#description">Описание</a>
</li>
<li class="nav-item">
<a class="nav-link" id="itemTabSpec" data-toggle="pill" href="#spec">Спецификация</a>
</li>
</ul>
<div class="tab-content" id="itemTabContent">
<div class="tab-pane show active" id="description">
<p>...</p>
</div>
<div class="tab-pane" id="spec">
<table>
...
</table>
</div>
</div>
JS Code:
$('#itemTabs a').on('shown.bs.tab', function(e) {
var activeTab = $(e.target),
previousTab = $(e.relatedTarget),// here is a problem and cant manipulate with previousTab and previousTabPane
activeTabPane = $(activeTab.attr('href')),
previousTabPane = $(previousTab.attr('href')),
minHeight = Math.min.apply(null, heights);
activeTab.css({
'top': 0
});
previousTab.removeAttr('style');
activeTabPane.css({
'height': 'auto',
'zIndex': 7,
'background-color': '#fffffe',
'top': 0,
'width': '100%'
});
previousTabPane.removeAttr('style');
previousTabPane.css('height', minHeight);
});
And I dont even see the property e.relatedTarget
Then I have pasted the copied code with tabs:
<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-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="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">3</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">4</div>
</div>
With little scenario as well:
$('#myTab a').on('shown.bs.tab', function(e) {
var activeTab = $(e.target),
previousTab = $(e.relatedTarget);
console.log(previousTab);
});
And here it works.
And now I am trying to find out, hat I have broken that I have lost the ability to use e.relatedTarget
Try adding the class active to nav-link instead of nav-item
$('#itemTabs a.nav-link').on('show.bs.tab', function(e) {
var activeTab = $(e.target),
previousTab = $(e.relatedTarget), // here is a problem and cant manipulate with previousTab and previousTabPane
activeTabPane = $(activeTab.attr('href')),
previousTabPane = $(previousTab.attr('href'));
//minHeight = Math.min.apply(null, heights);
activeTab.css({
'top': 0
});
previousTab.removeAttr('style');
activeTabPane.css({
'height': 'auto',
'zIndex': 7,
'background-color': '#fffffe',
'top': 0,
'width': '100%'
});
previousTabPane.removeAttr('style');
//previousTabPane.css('height', minHeight);
console.log('Previous Tab : ' + previousTab.text())
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="itemTabs">
<li class="nav-item">
<a class="nav-link active" id="itemTabDescription" data-toggle="pill" href="#description">Описание</a>
</li>
<li class="nav-item">
<a class="nav-link" id="itemTabSpec" data-toggle="pill"href="#spec">Спецификация</a>
</li>
</ul>
<div class="tab-content" id="itemTabContent">
<div class="tab-pane show active" id="description">
<p>...</p>
</div>
<div class="tab-pane" id="spec">
<table>
...
</table>
</div>
</div>