I am trying to keep selected tab active on page refresh in bootstrap 5

Rajdeep Bhowmick 0
Viewed 12

I am trying to keep selected tab active on page refresh. but when i am not able to find any solution for tabs in bootstrap 5. i tried to make changes according to bootstrap 4 solutions but nothing work. please help me.

This is my html

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                          <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="course-introduction-tab" data-bs-toggle="pill" href="#course-introduction" role="tab" aria-controls="pills-home" aria-selected="true">Course Introduction</a>
                          </li>
                          <li class="nav-item" role="presentation">
                            <a class="nav-link" id="live-Sessions-tab" data-bs-toggle="pill" href="#live-Sessions" role="tab" aria-controls="pills-home" aria-selected="true">Live Sessions Link</a>
                          </li>
                          <li class="nav-item" role="presentation">
                            <a class="nav-link" id="recordings-tab" data-bs-toggle="pill" href="#recordings" role="tab" aria-controls="pills-profile" aria-selected="false">Recordings</a>
                          </li>
                          <li class="nav-item" role="presentation">
                            <a class="nav-link" id="resources-tab" data-bs-toggle="pill" href="#resources"  role="tab" aria-controls="pills-contact" aria-selected="false">Resources</a>
                          </li>
                        </ul>
                        
                        <div class="tab-content" id="pills-tabContent">
    
                            <div class="tab-pane fade show active" id="course-introduction" role="tabpanel" aria-labelledby="pills-home-tab">
                               Lorem Ipsum
                            
                            </div>
                            
                            <div class="tab-pane fade" id="live-Sessions" role="tabpanel" aria-labelledby="pills-profile-tab">
    
                            Lorem Ipsum 
    
                            </div>
                            
                            <div class="tab-pane fade" id="recordings" role="tabpanel" aria-labelledby="pills-profile-tab">
                                Lorem Ipsum
    
    
                            </div>
    
                            <div class="tab-pane fade" id="resources" role="tabpanel" aria-labelledby="pills-profile-tab">
    
                                Lorem Ipsum
    
                            </div>
                    </div>

this is my script

<script>
$('a[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {
    console.log("tab shown...");
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

// read hash from page load and change tab
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
    $('.nav-pills a[href="' + activeTab + '"]').tab('show');
}
</script>
tabs bootstrap-5 jquery
1 Answers

$('.nav-pills a[href="' + activeTab + '"]').tab('show');

will give your an error TypeError: $(...).tab is not a function in bootstrap 5, since boostrap 5 if jQuery free.

So you'll have to use their new methods to use tab show feature. That will be like this from this reference:

if (activeTab) {
    const tab = new bootstrap.Tab($('.nav-pills a[href="' + activeTab + '"]'));

    tab.show();
}
Vijay Hardaha0
Related