Set active class when page refreshes JQuery?

Question

I have a UL on my page which is acting as navigation (it works fine). I copied some jQuery code to keep the classes as they are on page reload (through location.reload()) but can't set it up as I don't know much javascript.

and my HTML code :

<!-- TABS NAVIGATION -->
            <div id="tabs-nav">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
                            <!-- TAB-1 LINK -->
                            <li class="tab-link current" data-tab="tab-1">
                                <span class="flaticon-pizza"></span>
                                <h5 class="h5-sm">Pizze</h5>
                            </li>

                            <!-- TAB-2 LINK -->
                            <li class="tab-link " data-tab="tab-2">
                                <span class="flaticon-burger"></span>
                                <h5 class="h5-sm">Panini</h5>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- END TABS NAVIGATION -->


            <!-- TABS CONTENT -->
            <div id="tabs-content">

                <?php include_once "inc/db_connect.php"; ?>

                <!-- TAB-1 CONTENT -->
                <div id="tab-1" class="tab-content current">
                    <table class="editableTable sortable">
                        <!-- sql query -->
                    </table>
                </div>
                <!-- END TAB-1 CONTENT -->


                <!-- TAB-2 CONTENT -->
                <div id="tab-2" class="tab-content">
                    <div class="row">
                        <!-- database query -->
                    </div>
                </div>
                <!-- END TAB-2 CONTENT -->    
            </div>
            <!-- END TABS CONTENT -->

the way I intend to use location.reload

$(document).ready(function () {
    $('.editableTable').SetEditable({
        onAdd: function () {
            $.ajax({
                type: 'POST',
                url: "action.php",
                dataType: "json",
                data: { action: 'add' },
                success: function () {
                    location.reload();
                },
            });
        }
    });

    $('li').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).class('current'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab li[href="' + activeTab + '"]').tab('show');
    }
});

Answer 1

Saving $(e.target).class('current') won't work. There is no .class() method...

It seems you wish to use the href to open the tab... But there is no href!

So I think you should use the data-tab.

$(document).ready(function(){

  console.log("Page just loaded")

  $('li').on('show.bs.tab', function(e) {
    localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
    console.log("a data-tab value was saved to localStorage")
  });

  var activeTab = localStorage.getItem('activeTab');
  if(activeTab){

    console.log("There is an activeTab value stored:" , activeTab)

    // Loop all li to find the one having a data-tab == activeTab
    $('#myTab li').each(function(){
      if($(this).data("tab") === activeTab){
        $(this).tab('show');
      }
    });
  }
})