更改所选颜色<li>

Question

我有以下HTML代码：

 <div class="MenuContainer"> <div class="Menu"> <div class="MenuContents"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gamePage.html">Game</a></li> <li><a href="gameDesignPage.html">Game Design</a></li> <li><a href="devRolesPage.html">Developer Roles</a></li> <li class="float-right"><a href="about.html">About</a></li> </ul> </div> </div> </div>

如何使其才能使其中一个列表项选择了背景颜色即使在href加载新所选页面之后也会更改，因此可以清除用户所在的哪个页面？

我已经阅读了许多类似堆栈溢出问题的答案，这些问题通常使用JQuery将css class添加到html列表项或单击时更改颜色的锚点，但它对我不起作用，我觉得是因为href更改了页面（加载一个新页面）每次我选择一个列表项时，一切都会被重置，颜色永远不会改变，或者可能只是一瞬间而我无法注意到它？

Answer 1

由于我无法发表评论（还没有 50 个代表点），因此我会将其作为我认为您想要实现的目标的答案。

您希望当前活动的页面具有不同的背景颜色吗？ 为什么不在他所在的活动页面上添加一个类？

例如：

js

var pathname = window.location.pathname;
switch(pathname) {
   case "/index" :
       var active = document.getElementById("Home");
       active.ClassName += " Active";
       break;
   case "/gamePage" :
       var active = document.getElementById("GamePage");
       active.ClassName += " Active";
       break;
}

css

.Active{
   background-color: black;
}

html

                <li><a id="Index" href="index.html">Home</a></li>
                <li><a id="GamePage" href="gamePage.html">Game</a></li>
                <li><a id="GameDesignPage" href="gameDesignPage.html">Game Design</a></li>
                <li><a id="DevRolesPage" href="devRolesPage.html">Developer Roles</a></li>
                <li id="About" class="float-right"><a href="about.html">About</a></li>

Answer 2

首先，您需要 url 的路径名。 我还删除了前导斜杠：

var path = window.location.pathname.substring(1);

如果您的文件中有 .html，请再次使用 substring 替换它：

path = path.substring(0, path.length - 5);

要实现 javascript 的简单方法，请将具有相同名称的 id 添加到您的链接

<a id="index" href="index.html">Home</a>

现在将它们混合在一起：

var activeLink = document.getElementById(path);

现在添加你想要的活动类：

activeLink.classList.add("active");

希望这可以帮助！

Answer 3

根据 Wimanicesir 的回答，我设法解决了这个问题。

我现在有 html 代码：

<div class="MenuContainer">
    <div class="Menu">
        <div class="MenuContents">
            <ul>
                <li><a id="index" href="index.html" >Home</a></li>
                <li><a id="gamePage" href="gamePage.html" >Game</a></li>
                <li><a id="gameDesignPage" href="gameDesignPage.html" >Game Design</a></li>
                <li><a id="devRolesPage" href="devRolesPage.html" >Developer Roles</a></li>
                <li class="float-right"><a id="about" href="about.html" >About</a></li>
            </ul>
        </div>
    </div>
</div>

和 javascript：

$(document).ready(function () {
    var path = window.location.pathname.substring(1);
    path = path.substring(0, path.length - 5);
    var pathShort = path.substring(path.indexOf("/")+1);
    var activeLink = document.getElementById(pathShort);
    activeLink.classList.add("active");
});

这现在有效了，感谢 Wimanicesir 朝着正确的方向推动。