如何制作<李>在刷新页面后添加活动的css类

how to make <li> add css class active after refreshing page?

本文关键字：添加 活动 css 刷新 lt 何制作 gt      更新时间：2023-09-26

单击li项目后。我将active属性设置为css类，但li有一个转发另一个页面的链接。活动css消失了吗？如何做到这一点？我已经使用localstorage来缓存我以前选择的li项目。我找不到任何解决办法。刷新后如何激活类设置？如何在刷新页面后将活动类设置为活动？

<script type="text/javascript">
$(document).ready(function () {
    $("li").click(function () {
        var id = $(this).attr("id");
        console.log(id);
        var selectedolditem = localStorage.getItem('selectedolditem');
        if (selectedolditem != null) {
            $('#' + selectedolditem).siblings().find("active").removeClass("active");
            $('#' + selectedolditem).addClass("active");
            localStorage.clear();
            return;
        }
        $('#'+id).siblings().find("active").removeClass("active");
        $('#' + id).addClass("active");
        localStorage.setItem("selectedolditem", id);
    });
});

您的代码的问题是您试图在单击时检索它。这是错误的逻辑。正确的逻辑是：当页面加载时，检索它。当单击li时，存储它。您在使用find("active")时也有问题，您需要使用类字符.，否则它将搜索标记名为active而不是类的元素。

$(document).ready(function () {
    $("li").click(function () {
        var id = $(this).attr("id");
        $('#' + id).siblings().find(".active").removeClass("active");
            //                       ^ you forgot this
        $('#' + id).addClass("active");
        localStorage.setItem("selectedolditem", id);
    });
    var selectedolditem = localStorage.getItem('selectedolditem');
    if (selectedolditem != null) {
        $('#' + selectedolditem).siblings().find(".active").removeClass("active");
        //                                        ^ you forgot this
        $('#' + selectedolditem).addClass("active");
    }
});

请尝试以下操作。

$('li').each(function(){
    if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
    {
    $(this).addClass('active').siblings().removeClass('active');
    }
});

请尝试以下操作

$(document).ready(function() {
            $('.active').removeClass('active');
            var currurl = window.location.pathname;
            var val=$('li:has(a[href="'+currurl+'"])').addClass('active');
        });
相关文章：