动态更改导航颜色 JS/CSS

Question

尝试使用 JS 更改导航 CSS 颜色以显示当前选择。

我觉得这应该是一个超级简单的任务，但我尝试了 10 种不同的方法，但它们都不能在 ASP.NET 框架中工作......

我以前用 PHP 和 CSS 做过这个，我通过 IF 语句传递了一个变量来表示“如果这是活动链接，则更改导航的颜色”。

但是在 ASP.NET 中，变量不是全局的，因此无法传回母版页。因此，我尝试将其作为母版页上的 JS 脚本来修改导航的 CSS 以显示选择。我将每个链接作为不同的 ID，因为没有两个元素可以具有相同的 ID 名称。

标记：

<div id="nav">
    <a id="unsel1" onclick="navSelect1()" href="link1.aspx">Section 1</a>
    <a id="unsel2" onclick="navSelect2()" href="link2.aspx">Section 2</a>
    <a id="unsel3" onclick="navSelect3()" href="link3.aspx">Section 3</a>
    <a id="unsel4" onclick="navSelect4()" href="link4.aspx">Section 4</a>
</div>

JS：

function navSelect1() {
    document.getElementById("unsel1").id = "sel1";
    document.getElementById("sel2").id = "unsel2";
    document.getElementById("sel3").id = "unsel3";
    document.getElementById("sel4").id = "unsel4";
    }
function navSelect2() {
    document.getElementById("sel1").id = "unsel1";
    document.getElementById("unsel2").id = "sel2";
    document.getElementById("sel3").id = "unsel3";
    document.getElementById("sel4").id = "unsel4";
}
function navSelect3() {
    document.getElementById("sel1").id = "unsel1";
    document.getElementById("sel2").id = "unsel2";
    document.getElementById("unsel3").id = "sel3";
    document.getElementById("sel4").id = "unsel4";
}
function navSelect4() {
    document.getElementById("sel1").id = "unsel1";
    document.getElementById("sel2").id = "unsel2";
    document.getElementById("sel3").id = "unsel3";
    document.getElementById("unsel4").id = "sel4";
}

和 CSS：

#nav{
    position:relative;
    z-index:999;
    margin-top:-20px;
}
#nav a{
    font-weight:bold;
    font-size:18px;
    padding:5px 15px 5px 15px;
    border:1px solid #000;
    border-bottom:none;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}
#nav a:visited{
    color:#0b264b; /*navy blue*/
}

#unsel1{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel1{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}
#unsel2{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel2{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}
#unsel3{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel3{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}
#unsel4{
    background:#eee; /*light gray*/
    color:#0b264b; /*navy blue*/
}

#sel4{
    background:#60bd0e!important; /*lime green*/
    color:#fff!important;

}

有什么建议吗？

Answer 1

我会先给 ID 一个相对 ID，所以更多的是与他们的页面名称相关；即：page_link1 page_link2 等。然后在每个相关页面的底部，我将添加以下 javascript：

document.getElementById("page_link1").className = "active";

那么在css中你需要做的就是

nav #page_link1.active
{
  /* special styling goes here */
}

nav #page_link2.active
{
  /* special styling goes here */
}