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