在点击时突出显示<li>元素,并在页面加载后保持突出显示</li>

时间:2013-06-25 09:59:04

标签: c# javascript html css

我正在将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';
        }
    

    但是因为我点击超链接。主页面重新加载,所选样式丢失

  • 2 个答案:

    答案 0 :(得分:0)

    由于超级链接位于<li>使用

    e.preventDefault();将停止<a>代码

    的默认操作

    更新

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

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

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

    答案 1 :(得分:0)

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

    1. 定义样式的类
    2. 将当前页面网址与a href网址进行比较(各种方法可以执行此操作以及各种级别的匹配)
    3. 如果匹配,则将该类应用于该元素
    4. 我会做这个服务器端,而不是javascript。

      另一个选择是使用cookie /会话变量,不确定C#语法,我最近在PHP中做了这个并且使用AJAX在过滤一些数据后设置会话变量以记住当点击下一个时的当前状态水平。