Dynamically set active tab in jquery

Dynamically set active tab in jquery

Today, We want to share with you Dynamically set active tab in jquery.In this post we will show you bootstrap get active tab index, hear for How to Keep the Current Tab Active on Page Reload in Bootstrap we will give you demo and example for implement.In this post, we will learn about Demo of Setting and getting active Tab in JQuery UI with an example.

Dynamically set active tab in jquery

There are the Following The simple About Dynamically set active tab in jquery Full Information With Example and source code.

  Laravel Debugbar Your Laravel Application

As I will cover this Post with live Working example to develop
How to keep the tab active when the user come page to page?
, so the get active tab jquery for this example is following below.

Dynamic Tabs with jQuery

bootstrap tabs with dynamic content loading

//For jquery active tabs
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

    localStorage.setItem('activeTabs', $(this).attr('href'));
});

//for active tabs
var activeTabs = localStorage.getItem('activeTabs');
if (activeTabs) {
    $('[href="' + activeTabs + '"]').tab('show');
}

Full Example: jquery tabs set active tab on page load

index.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
	<title>bootstrap switch tab programmatically</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
   
<div class="container hidden">
    <ul class="nav nav-pills">
        <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
        <li><a data-target="#about" data-toggle="tab">About</a></li>
        <li><a data-target="#contacts" data-toggle="tab">Contacts</a></li>
    </ul>
</div>

<div class="tab-content hidden">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane" id="about">About</div>
    <div class="tab-pane" id="contacts">Contacts</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    $(function() {
    var ActiveTab = localStorage.getItem('ActiveTab');
    $('.container, .tab-content').removeClass('hidden');
    if (ActiveTab) {
      $('[data-target="' + ActiveTab + '"]').tab('show');
    }
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      localStorage.setItem('ActiveTab', $(this).data('target'));
    });
  });
  </script>   

  </body>
  
</html>

Example 2: Setting and getting active Tab in JQuery UI

HTML Code

<div id="langTabs">
<ul>
<li><a href="#vuejs">Vuejs</a></li>
<li><a href="#html">Angularjs</a></li>
<li><a href="#react">React</a></li>
<li><a href="#laravel">Laravel</a></li>
</ul>
<div id='vuejs'>vuejs is a Client side scripting language ...........
</div>

<div id='react'>This is the set of react which is understood by web browser...... 
</div>

<div id='laravel'>This is a laravel which stores uniq data..... 
</div>

</div>

<br>
<div class='dsp btn-radio'>
  <label><input type='radio' name='r1' id='r1' value='0' checked>Langauage 0 </label>
</div>

<div class='dsp btn-radio'>
  <label><input type='radio' name='r1' id='r2' value='1' >Langauage 1</label>
</div>

<div class='dsp btn-radio'>
  <label><input type='radio' name='r1' id='r3' value='2' >Langauage 2</label>
</div>
<div class='dsp btn-radio'>
  <label><input type='radio' name='r1' id='r4' value='3' >Langauage 3</label>
</div>

jquery Code

<script>
$(document).ready(function() {

$( "#langTabs" ).tabs({
	heightStyle: "auto"
})

var lang_current = $( "#langTabs" ).tabs( "option", "active" );
$("#d1").html('Tab Selected : ' +lang_current);

$("input:radio[name=r1]").click(function() {
var sel = Number($("input[name=r1]:checked").val())
$( "#langTabs" ).tabs( "option", "active", sel );

var lang_current = $( "#langTabs" ).tabs( "option", "active" );
$("#d1").html('Tab Selected : ' +lang_current);
 });

})
</script>

Web Programming Tutorials Example with Demo

Read :

  Bootstrap get active tabs index using jQuery Example

Summary

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

I hope you get an idea about Dynamically set active tab in jquery.
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.

Leave a Reply

avatar
  Subscribe  
Notify of