bootstrap set active tab javascript – How to change active bootstrap tab with javascript?

bootstrap set active tab javascript nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin. Set customTabs to true to deactivate the automatic tab navigation generation.

bootstrap set active tab javascript

Use the HTML5 localStorage Object Dynamically set active tab in jquery,bootstrap 4 dynamic tabs,bootstrap set active tab javascript,jquery tab show,get active tab jquery.

bootstrap set active tab javascript

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

Make Bootstrap tab Active on the bases of URL link

var url = window.location.href;
var activeTab = url.substring(url.indexOf("#") + 1);
 $(".tab-pane").removeClass("active in");

$("#" + activeTab).addClass("active in");

$('a[href="#'+ activeTab +'"]').tab('show')

How to keep the current tab active on page reload in Bootstrap?

<!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">
                <a href="#activateA" class="nav-link active" data-toggle="tab">activate A</a>
            </li>
            <li class="nav-item">
                <a href="#activateB" class="nav-link" data-toggle="tab">activate B</a>
            </li>
            <li class="nav-item">
                <a href="#activateC" class="nav-link" data-toggle="tab">activate C</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="activateA" class="tab-pane fade show active">
                <h3>activate A</h3>
                <p>Tamilrockers is a torrent website that is immensely popular among south Indian movie fans....</p>
            </div>
            <div id="activateB" class="tab-pane fade">
                <h3>activate B</h3>
                <p>Tamilrockers is an Indian piracy website that provides access to download free movies online....</p>
            </div>
            <div id="activateC" class="tab-pane fade">
                <h3>activate C</h3>
                <p>Latest tamil rockers News, Photos, Blogposts, Videos and Wallpapers....</p>
            </div>
        </div>
    </div>    
</body>
</html>

don’t Miss : Dynamically Set Active Tab In Jquery

I hope you get an idea about bootstrap set active tab javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.