Home » jquery tabs refresh active tab on page reload

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.

Read Also:  jquery checkbox checked values 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.

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.

Read Also:  Angularjs Bar Rating Component and demo

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:  jQuery Background Change

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Jquery Get Number of Characters String length
  2. Read Also:  Simple Laravel Log Viewer API Example
  3. Read Also:  Laravel Eloquent "WhereNotIn" Query Example
  4. Read Also:  PHP GET Base URL Absolute Path Example
  5. Read Also:  Dynamically set active tab in jquery
  6. Read Also:  Simple Laravel Contact Us Form With Email Example
  7. Read Also:  Laravel Check Duplicate Records before insert
  8. Read Also:  How to upload Profile Images to Users using Laravel 6?
  9. Read Also:  PHP GET Base URL Absolute Path Example
  10. Read Also:  Laravel Check Duplicate Records before insert

Leave a Comment

Your email address will not be published. Required fields are marked *