頁面刷新時設置激活 class 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');
      }
    });
  }
})