Question

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

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

我之前使用PHP和CSS完成了这项工作，在那里我通过IF语句传递一个变量来说“如果这是活动链接，那么改变导航的颜色”。

但是对于ASP.NET，变量不是Global，因此无法传递回母版页。所以相反，我正在尝试将其作为主页面上的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，因此更多与其页面名称相关; ie：page_link1 page_link2等。然后在每个相对页面的底部我会添加以下javascript：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

动态更改导航颜色JS / CSS

1 个答案: