jquery tabs refresh active tab on page reload

Today, We want to share with you jquery tabs refresh active tab on page reload.In this post we will show you jquery tabs set active tab on page load, hear for keep the tab open in accordion after page refresh we will give you demo and example for implement.In this post, we will learn about how to keep the current tab active on page reload in javascript with an example.

jquery tabs refresh active tab on page reload

There are the Following The simple About jquery tabs refresh active tab on page reload Full Information With Example and source code.

Read Also:  Simple Laravel 5 Vue JS Ajax CRUD(insert update delete)

As I will cover this Post with live Working example to develop remember which tab was active after refresh, so the css class active after page reload for this example is following below.

Keep selected tab on page refresh

JavaScript

$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
    localStorage.setItem('currentTab', $(e.target).attr('href'));
});

var currentTab = localStorage.getItem('currentTab');

console.log(currentTab);

if (currentTab) {
   $('a[href="' + currentTab + '"]').tab('show');
}

HTML Part

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Pakainfo - home</div>
    <div class="tab-pane" id="profile">Pakainfo - profile</div>
    <div class="tab-pane" id="messages">Pakainfo - messages</div>
    <div class="tab-pane" id="settings">Pakainfo - settings</div>
</div>

CSS Part

body {
  padding: 15px;
}

Web Programming Tutorials Example with Demo

Read :

Read Also:  PHP Conditional Control Statements with Example

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery tabs refresh active tab on page reload.
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.