在点击时突出显示 <li> 元素，即使在页面加载后也保持突出显示答案

【问题标题】：highlighting a <li> element on click and keeping it highlighted even after page load在点击时突出显示 <li> 元素，即使在页面加载后也保持突出显示
【发布时间】：2013-06-25 09:59:04
【问题描述】：

嗨，我正在将 css 应用于我的列表元素之一，它位于

中

标记，位于母版页中。因此，当我单击此链接时，样式已被应用，但页面重新加载，然后应用的样式再次重置为默认值，这是我的代码，有人可以帮我吗？请？

 function SelectThis(ctrl) {
        debugger;
        var list = document.getElementById("myslidemenu").getElementsByTagName('a');

        for (i = 0; i < list.length; i++) {
            list[i].style.color = "white";
            list[i].style.background = "#414141";
        }
        ctrl.style.background = "black";
        ctrl.style.color = 'yellow';
    }

但是因为我点击了一个超链接。母版页重新加载，所选样式丢失

【问题讨论】：

我不知道 c# 和母版页，但是......也许你可以在 javascript cookie 中保存更改/选择的样式，或者阻止默认行为，这样就不会重新加载？
我尝试过 document.cookie = selectedControl，但是当我阅读该 cookie 时，我只获得了该控件的超链接，您能否详细说明如何做到这一点？ @nevermind

标签： c# javascript html css

【解决方案1】：

因为它是一个超链接，所以位于<li> 使用

e.preventDefault();将停止<a> 标签的默认操作

更新：

list[i].addEventListener('click',preventReload);

function preventReload(e){
    e.preventDefault();
}

在 for 循环中添加此代码，这将停止超链接的默认功能，即停止页面重新加载。

【讨论】：

【解决方案2】：

如果您需要重新加载页面，因为它是子页面的菜单，那么我这样做的方式是：

为样式定义一个类
将当前页面 url 与 a href url 进行比较（执行此操作的各种方法和不同级别的匹配）
如果匹配，则将类应用于该元素

我会做这个服务器端，而不是使用 javascript。

另一个选项是使用 cookie/session 变量，不确定 C# 语法，我最近在 PHP 中这样做，并在过滤一些数据后使用 AJAX 设置会话变量，以便在单击下一个时记住当前状态级别。

【讨论】：