如何在頁面刷新時保持選定的選項卡處於活動狀態？

Question

我的代碼不起作用。 此代碼基本上用於在頁面刷新或頁面重新加載時保持活動的當前選定頁面或選項卡。

HTML 代碼：

<section id="sidebar" class="affectedDiv">
<a href="#" class="brand">
    <!-- <i class='bx bxs-smile'></i> -->
    <span class="text"><img src="images/logo.png" alt="" class="img-logo"></span>
</a>
<ul class="side-menu top" id="myTab">
    <li class="active">
        <a href="#dashboard" data-toggle="tab" data-index=1>
            <i class='bx bxs-dashboard'></i>
            <span class="text">Dashboard</span>
        </a>
    </li>
    <li>
        <a href="#1a" data-toggle="tab" data-index=2>
            <i class='bx bxs-dashboard'></i>
            <span class="text">Add Employee</span>
        </a>
    </li>
    <li>
        <a href="#2a" data-toggle="tab" data-index=3>
            <i class='bx bxs-group'></i>
            <span class="text">Show Employee</span>
        </a>
    </li>
</ul>
</section>
<section id="content">
<main>
<div class="tab-content clearfix">
        <!-- dashboard -->
        <div class="tab-pane active" id="dashboard">

<!-- some code -->
</div>
 <div class="tab-pane" id="1a">
<!-- some code -->
</div>
<div class="tab-pane" id="2a">
<!-- some code -->
</div>
</main>
</section>

Javascript：

<script>
    $('#myTab a').click(function(e){
        e.preventDefault();
        $(this).tab('show');
        alert("h");
    });

    $("ul.side-menu > li a").on("shown.bs.tab",function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash=id;
    });
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>

當我刷新頁面時，此代碼不起作用。 此代碼用於在頁面刷新或頁面重新加載時保持活動的當前選項卡處於活動狀態

Answer 1

只需將當前活動的選項卡添加到localStorage 。 為此，為每個選項卡提供一個數據屬性，例如data-index ，其值類似於 1、2、3... 然后執行localStorage.setItem("tabIndex", $(ul li.active).data(index);)這會將活動選項卡的 data-index 屬性保存到瀏覽器緩存中。 然后，您可以使用此var tabindex = localStorage.getItem("tabIndex");在頁面加載后獲取存儲的值 .