刷新页面后（如何使用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');
    }
});

我希望单击后可以更改活动类，但单击后所有类都会更改，我知道为什么会发生，但不知道如何解决。

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');
    }
});

Answer 2

代码

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

应包装在jQery.ready（）上。