動態更改導航顏色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 */ 
 
}