更改導航欄背景顏色？

我目前正試圖爲我的一個網站設計一個導航欄。該導航欄將位於網頁的頂部。更改導航欄背景顏色？

問題是，當我將鼠標懸停在它們上方時，我可以讓項目改變顏色，但是一旦頁面處於活動狀態，就無法讓項目保持懸停狀態。例如，如果我想要去「家」，我會將鼠標懸停在導航欄中的「主頁」項上，並且它會變成灰色，當我點擊它時返回到「index.php」「主頁「在導航欄中會保持灰色。（導航欄的背景爲黑色）。

我已經格式化了一行表格和一些數據，這些數據將作爲鏈接。這就是HTML代碼一種看起來像：

<div id="header_banner"> 
<table id="header_banner_table"> 
    <tr id="header_banner_row"> 
     <td id="header_banner_a"><a class ="link1" href="">Item 1</a></td> 
     <td id="header_banner_b"><a class ="link1" href="">Item 2</a></td> 
     <td id="header_banner_c"><a class ="link1" href="">Item 3</a></td> 
     <td id="header_banner_d"><a class ="link1" href="">Item 4</a></td> 
     <td id="header_banner_e"><a class ="link1" href="">Item 5</a></td> 
     <td id="header_banner_f"><a class ="link1" href="">Item 6</a></td> 
     <td id="header_banner_g"><a class ="link1" href="">Item 7</a></td> 
    </tr> 
</table> 
</div>

下面是一些CSS的：

#header_banner { 
    display: block; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
    height: 71px; 
    background-color: black; 
    color: white; 
    font-size: 18px; 
    text-align:center; 
    text-transform: uppercase; 
    text-decoration: none; 
} 

#header_banner_table { 
    position: fixed; 
    top: 0px; 
    width: 60%; 
    padding: 0px; 
    margin-left: 20%; 
    margin-right: 20%; 
} 

.link1 { 
position: relative; 
display: block; 
color: white; 
text-decoration: none; 
padding-top: 23px; 
padding-bottom: 23px; 
padding-left: 20px; 
padding-right: 20px; 
} 

.link1:hover{ 
position: relative; 
display: block; 
text-decoration: none; 
color: white; 
padding-top: 23px; 
padding-bottom: 23px; 
padding-left: 20px; 
padding-right: 20px; 
background-color: gray; 
}

所以目前的導航欄的背景是黑色的，而當你將鼠標懸停在東西，它變成灰色。當該頁面處於活動狀態時，我希望它保持灰色。

任何解決方案？

預先感謝您。

來源

2013-08-05 Oliver Crow

嘗試

:focus

或

:active

但我認爲它需要點擊。

來源

2013-08-05 00:35:06 Falcon

感謝您的回覆。但是活動狀態只適用於點擊按鈕時，而不是之後。所以如果你按住按鈕點擊，它就會激活。 –

您是否熟悉jQuery？如果我和你一樣思考同樣的事情，你應該可以用jQuery來做到這一點。

var path = window.location.pathname; 

$('#header_banner_row a').each(function(){ 
    if($(this).attr('href') === path){ 
     $(this).addClass('active'); 
    } 
});

所以基本上，var path是無論是.COM之後，在瀏覽器的導航欄。如果該路徑與標題中的a之一相同，則會獲得一個可以設置爲灰色的活動類。

來源

2013-08-05 00:40:08 maxinacube

感謝您的回覆。不幸的是，我不熟悉jQuery。我不完全確定你的意思，或者如何實現它。你能告訴我嗎？ –

在您網站的頭部添加''，並且在jQuery被收錄之後，您可以包含一個'script.js'來保存上面的代碼。只要確保你有'jQuery（document）.ready（function（$）{//你的代碼在這裏}）;'。如果腳本沒有包含在ready函數中，事情就會出錯。另外，在關閉正文標籤之前包含自定義腳本是最佳做法。 – maxinacube

再次感謝。我制定了另一個解決方案，我發現它也幫助我處理其他情況。我正在使用PHP來有條件地應用CSS樣式表。我不確定這是否是一種可接受的方法，但它可行。 –

更改導航欄背景顏色？

回答

相關問題