0
嘗試使用JS更改導航CSS顏色以顯示當前選擇。動態更改導航顏色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;
}
有什麼建議?
這些頁面中的每一個都更像是一段頁面。我正在考慮將其作爲用戶控件進行操作,以便可以在第1部分中的每個頁面上使用它,而不是在第1部分中的每個頁面上鍵入它。 –