动态更改Nav颜色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 */
}

​