是否在页面刷新JQuery时设置活动类？

Question

我在我的页面上有一个UL，它充当导航(它工作得很好)。我复制了一些jQuery代码，以便在页面重新加载时保持类的原样(通过location.reload())，但我不能设置它，因为我不太了解javascript。

和我的HTML代码：

<!-- 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 -->

我打算使用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

保存$(e.target).class('current')将不起作用。没有.class()方法...

您似乎希望使用href打开选项卡...但是没有href！

所以我认为你应该使用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');
      }
    });
  }
})