Repository navigation
class="active" managed improperly with data-toggle="tab" #19374
Description
Activity
here are the v4 jsfiddles:
working
not workingReacted by Senthil KannanHi @tomkel!
You appear to have posted a live example (http://jsbin.com/fabijusugu/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 21, column 5: W012:
.navbar's first child element should always be either.containeror.container-fluid
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!(Please note that this is a fully automated comment.)
- line 21, column 5: W012:
Hi @tomkel!
You appear to have posted a live example (http://jsbin.com/fixiyinuwi/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:
- line 23, column 9 thru column 76: Element
anot allowed as child of elementulin this context. (Suppressing further errors from this subtree.) - line 24, column 9 thru column 68: Element
anot allowed as child of elementulin this context. (Suppressing further errors from this subtree.) - line 25, column 9 thru column 70: Element
anot allowed as child of elementulin this context. (Suppressing further errors from this subtree.) - line 26, column 9 thru column 71: Element
anot allowed as child of elementulin this context. (Suppressing further errors from this subtree.)
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!(Please note that this is a fully automated comment.)
- line 23, column 9 thru column 76: Element
The bug persists when setting
.navbar's first child to.container.I'm having this issue as well, although whatever I do, it does not work.
<div class="nav nav-tabs" id="myTab"> <a class="nav-item nav-link" data-toggle="tab" href="#one">One</a> <a class="nav-item nav-link" data-toggle="tab" href="#two">Two</a> </div> <div class="tab-content"> <div class="tab-pane" id="one">ONE TAB</div> <div class="tab-pane" id="two">TWO TAB</div> </div> <script> $('#myTab a:first').tab('show'); </script>@cvrebert Any idea when this will be fixed? Thanks.
@cvrebert Here is an updated JSBin using the latest v4-dev: http://jsbin.com/jinimoqoyo/1/edit?html,output
Also, could you please remove the
awaiting replylabel?Hi @RyanZim!
You appear to have posted a live example (http://jsbin.com/hedehalopa/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:
- line 18, column 5: W012:
.navbar's first child element should always be either.containeror.container-fluid
You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!(Please note that this is a fully automated comment.)
- line 18, column 5: W012:
Updated JSBin: http://jsbin.com/jinimoqoyo/1/edit?html,output
This still happens, and it's tied with issue #18566
Sorry folks, I was reading an (still) out of date documentation on mdb (materia design bootstrap) that didn't match v4 and triggered this particular behaviour along with the .active class issue.
8 remaining items
in my case the problem was the bootstrap version, I was using version 4.0.0-alpha.6 and I was using a method from an old version
- add in the
<ul role = "tablist"> - in the
<li>the class = 'active' is no longer going, it is<li class = "nav-item"> - in the
<a>aggregate<a class="nav-link active"> - in the divs of the tab-contet must go active
<div class="tab-content"> <div class="tab-pane slide-left active" id="slide1"> . . . </div> </div>final structure in my case
<ul class="nav nav-tabs nav-tabs-fillup" data-init-reponsive-tabs="dropdownfx" role="tablist"> <li class="nav-item"> <a data-toggle="tab" class="active nav-link " href="#slide1"><span>home</span></a> </li> <li class="nav-item"> <a data-toggle="tab" class="nav-link" href="#slide2"><span>tab test</span></a> </li> </ul> <div class="tab-content"> <div class="tab-pane slide-left active" id="slide1"> . . . </div> <div class="tab-pane slide-left " id="slide2"> . . . </div> </div>Reacted by Harold Fernando Porris montoya, Radha Raman, clillefield, a³, Angus Leung, Bret Rideout, Fabian Raetz, anikshasangole, Jakub Plesník, Jewel Chowdhury and 2 moreReacted by Abraham Preciado Fonseca, anikshasangole and Dinesh RawatReacted by Harold Fernando Porris montoya, Radha Raman, clillefield, durga-pericherla, hoanggiang1851996 and anikshasangoleReacted by Radha Raman, clillefield, a³, Angus Leung, Jewel Chowdhury, Aleksandar Stanimirov and Riyasree Ghosh- add in the
If you are using Bootstrap 3.3.7 then you can write below custom JQuery to fix this bug.
$(function() { $(".apply-active").click(function() { // remove classes from all $(".apply-active").removeClass("active"); // add class to the one we clicked $(this).addClass("active"); }); });@jaylahoti I tried this and it seems to disable the tabs working at all.
fixed my issue through remove bt functionality with little custom code
$('#containerContainingTabs a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
var theThis = $(this);
$('#containerContainingTabs a').removeClass('active');
theThis.addClass('active');
});#containerContainingTabs is the id on div which container tabs links
Reacted by Ahsan Asif and Enzo BeauchampReacted by Eduardo Javier Maldonado Acevedo, Enzo Beauchamp and Naing Naing TunThank you so much fayazrehmani for this code...Its really work for me. I'm stuck before a 6h ago but you really solved my problem to give me this code.
fixed my issue through remove bt functionality with little custom code
$('#containerContainingTabs a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
var theThis = $(this);
$('#containerContainingTabs a').removeClass('active');
theThis.addClass('active');
});#containerContainingTabs is the id on div which container tabs links
Thank you @fayazrehmani this work for me.
$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})@PORRIS :sir but in my case whole page is redirected after click any tab can you tell me what the problem and i am angular9?
@PORRIS :sir but in my case whole page is redirected after click any tab can you tell me what the problem and i am angular9?
You need to use
e.preventDefault()exactly as the Bootstrap Documentation stated:$('#myTab a').on('click', function (e) { e.preventDefault() // <-- this line $(this).tab('show') })Reacted by Harold Fernando Porris montoyaand really, for in-page controls, you should be using
<button>elements rather than links (unless that's something in angular that can't be changed for some odd reason)This problem still exists in Bootstrap 4.5.3...
The 'active' class is not removed from default tab when switching between tabs.
can i suggest making a fresh issue, with a fresh codepen/jsbin example?
can i suggest making a fresh issue, with a fresh codepen/jsbin example?
I would normally but there are countless issues of the same problem on here spanning a number of years and it still hasn't been addressed despite all with activity and closed as duplicates etc.
If I find the time at some point, I'll try and raise a new issue 👍
Reacted by Chris and Yaz2021 and still an issue LOL, i have multiple tab controls in the page, so this worked for me:
$(document).ready(function () { //Fix Bootstrap bug with Tab control not removing active class when switching tabs $(".nav-tabs li.nav-item a.nav-link").click(function () { $(".nav-tabs li.nav-item a.nav-link").removeClass('active').off('click'); }); });Here is a working example with a fix.
Below is the fix. If you comment out that part, you can still see it is not fixed for 5.0.0-beta2
$(".nav-pills button").click(function () { $(this).closest(".nav-pills").find("button").not($(this)).removeClass("active"); });
This works:
However when the
<ul>is changed to a<div>, the active classes are never unset, thus breaking the data-toggle.This does not work: