Keep the selected tab when I click on browser back button or mobile device back button

Question

the below code for tabs in mobile view and my question how can I keep the selected tab if I click on any link in the selected tab and go to any link and when I click on back button in mobile device or browser back button back to the selected tab

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
     $(document).ready(function(){
                $('a.tab-menu').click(function(){
                    if ( $(window).width() < 768 ) 
                   $('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
                });
            });
    </script>
    </head>

    <body>
    <h2 class="responsive-tab"><a href="#tab-1" class="tab-menu">tab 1</a></h2>
    <div id="tab-1"> content here </div>
    <h2 class="responsive-tab"><a href="#tab-2" class="tab-menu">tab 1</a></h2>
    <div id="tab-2"> content here </div>
    <h2 class="responsive-tab"><a href="#tab-3" class="tab-menu">tab 1</a></h2>
    <div id="tab-3"> <a href="#">link here</a> </div>
    </body>
    </html>

You want to keep the tab open when a user pushes the back button? why? — Cruiser, Oct 19 '15 at 20:45
http://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser — Cruiser, Oct 19 '15 at 21:00

score 0 · Accepted Answer · answered Oct 19 '15 at 21:12

You can use localStorage or sessionStorage

http://www.w3schools.com/html/html5_webstorage.asp

So something like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
 $(document).ready(function(){
             if (localStorage.which_tab) {
               $('#tab-'+localStorage.which_tab).slideToggle("slow").siblings('div').hide('slow');
               $('#tab-'+ localStorage.which_tab).slideToggle('slow');
             }
            $('a.tab-menu').click(function(){
                if ( $(window).width() < 768 ) 
               $('#tab-'+($('.tab-menu').index($(this))+1)).slideToggle("slow").siblings('div').hide('slow');
               var t = $(this).attr('data-type')
               localStorage.which_tab = t
            });
        });
</script>
</head>

<body>
<h2 class="responsive-tab"><a href="#tab-1" data-type="1" class="tab-menu">tab 1</a></h2>
<div id="tab-1"> content here </div>
<h2 class="responsive-tab"><a href="#tab-2" data-type="2" class="tab-menu">tab 1</a></h2>
<div id="tab-2"> content here </div>
<h2 class="responsive-tab"><a href="#tab-3" data-type="3" class="tab-menu">tab 1</a></h2>
<div id="tab-3"> <a href="#">link here</a> </div>
</body>
</html>

You can view in a plnkr

http://plnkr.co/edit/6sVWrdfjnZyb9sDEog7V?p=preview

Keep the selected tab when I click on browser back button or mobile device back button

1 Answers1