Bootstrap Tab - Show the last tab after reloading page

lawyerlinguist

Good evening everybody.
I use JaLawfirm, I set up Bootstrap tabs like in the "Typography" page of the demo site. (Navigation-Tabs)
However, I'd like the site to show the last tab selected before reloading the page. In other words, after reloading the page I'd like to see the last tab selected before reloading the page.

To this aim, I have this javascript code:

<script type="text/javascript">
$(function() { 
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab;
        localStorage.setItem('lastTab', $(this).attr('href'));
    });
    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});
</script>

I tested it on a web page I set up with the same tabs, it works perfectly.
The problem is, I can't get it to integrate these few lines in joomla.
I added the code in T3 (add custom code) both before and after <head>; but it never works.
After reloading the page, the page still shows the first tab selected.

I'd really appreciate your help in solving this problem; for any reference, you can consider the Tabs in the Typography page of the demo site.

Thank you in advance

saguaros

lawyerlinguist
Hi,

Try this one:

$(function() {
    $('a[data-toggle="tab"]').on('click', function(e) {
        window.localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = window.localStorage.getItem('activeTab');
    if (activeTab) {
        $('#myTab a[href="' + activeTab + '"]').tab('show');
        window.localStorage.removeItem("activeTab");
    }
});

lawyerlinguist

Good morning,
thank you for your reply.
Well, the question is: where to put it?

lawyerlinguist

I added the code in "custom code" in "edit style", before </head>; it doesn't work in the demo site either I installed on my server. When reload the page, the selection goes back to the first tab.

lawyerlinguist

Just to clarify: I'm trying to make the last bootstrap tab selected to stay selected even after reloading the page; I'm considering the JaLawfirm site as downloaded and just installed on my server, just like the demo site.
Please read the previous posts too.
I'd really appreciate any help.

saguaros

lawyerlinguist
You can open the file: root/templates/ja_lawfirm/js/script.js

Look at the script at the end of file, change like this:

(function($) {
  $(window).ready(function () {
    // Add Inview
    $('.t3-sections > .section-inner').bind('inview', function(event, visible) {
      if (visible) {
        $(this).addClass('acm-inview');
      }
    });
  });

$(function() {
    $('a[data-toggle="tab"]').on('click', function(e) {
        window.localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = window.localStorage.getItem('activeTab');
    if (activeTab) {
        $('#myTab a[href="' + activeTab + '"]').tab('show');
        window.localStorage.removeItem("activeTab");
    }
});
  
})(jQuery);

Also make sure that you add the ID="myTab" in the markup:

<ul class="nav nav-tabs" id="myTab">

Regards

lawyerlinguist

Thank you, that's what I meant.
Have a good day.