javascript - 刷新页面后如何保持课堂活跃（使用jQuery）

Question

我一直在寻找一整天，发现了几个例子，但没有一个能正常工作。我有一个导航栏，我想active在点击它并刷新页面后继续上课，但它迷路了。

这是我的代码：

HTML

<li class="sub-menu" style="border-bottom: 1px solid grey;">
    <a class="menuItem active" href="@Url.Action("Index", "Administrator")">
        <i class="fa fa-th"></i>
        <span>Index</span>
    </a>
</li>

 <li class="sub-menu">
    <a class="menuItem normal" href="@Url.Action("Products", "Administrator")">                     
        <i class="fa fa-shopping-cart"></i>
        <span>product</span>
    </a>
 </li>

Javascript

var retrievedObject = localStorage.getItem('classChange');

if (retrievedObject) {
    $('.menuItem').addClass(retrievedObject)
}

$(".menuItem").click(function () {
    if ($(this).hasClass("normal")) {
        $(this).removeClass('normal').addClass('active');
        localStorage.setItem('classChange', 'active');
    } else {
        $(this).removeClass('active').addClass('normal');
        localStorage.setItem('classChange', 'normal');
    }
});

我希望在单击后更改活动课程，但单击后所有课程都会更改，我了解它为什么会发生但不知道如何解决它。

标签： javascriptjqueryhtml

Answer 1

你能给每个元素一个 id 值，并在函数中将元素和类的 id 存储在本地存储中吗？然后，在重新加载时检查两个 id 的？

如果您需要更多元素，您可以保存一个 id 数组，然后在必要时使用它在所有 id 之间循环。

所以是这样的：

var ids = ['id1','id2'];
for(i of ids) {
    var retrievedObject = localStorage.getItem(i);
    if (retrievedObject) {
        var id = "#" + i;
        $(id).addClass(retrievedObject);
    }
}

$(".menuItem").click(function (event) {
    if ($(this).hasClass("normal")) {
        $(this).removeClass('normal').addClass('active');
        localStorage.setItem('classChange', 'active');
    } else {
        $(this).removeClass('active').addClass('normal');
        localStorage.setItem(event.target.id, 'normal');
    }
});