菜單導航欄更改突出顯示的顏色並保持在用戶訪問同一頁面時

在我的網站上，我試圖給導航欄提供更多樣式，當菜單項已被懸停在背景顏色變化上時，我正在嘗試做什麼是當它被點擊/選擇時，我希望背景顏色保持到另一個菜單項被點擊/選擇。菜單導航欄更改突出顯示的顏色並保持在用戶訪問同一頁面時

我已經在本網站上嘗試了幾個類似查詢的例子，但我只能讓它部分工作。它只適用於href="#"，但當我用href="homepage.html"代替它時，菜單項的背景色將不會保留，並且會改回。

作爲一個單一的頁面，它工作正常，但是當我爲每個項目創建頁面時，它不再有效。

<style type="text/css"> 

#navigation a:hover {background:#5B000C; color:#ffffff;} 
#navigation{ float:left; background-color:#000099; width:600px; height:25px; } 
.item { width:600px; padding:0; margin:0; list-style-type:none; } 
a { display:block; width:60PX; line-height:25px;/*24px*/ border-bottom:1px none #808080; font-family:'arial narrow',sans-serif; color:#FFF; padding: 0px; text-align:center; text-decoration:none; margin-bottom:0em; }      
a.item { float:left;/* For horizontal left to right display. */ width:100px;/* For maintaining equal */ margin-right:0px;/* space between two boxes. */ }      
a.selected { background:#5B000C; color:white; } 

    </style>   
</head> 
<body> 
     <div id="navigation"> 
      <a class="item" href="#" >HOME</a> 
      <a class="item" href="#" >SUITE</a> 
      <a class="item" href="#" >TEAM</a> 
      <a class="item" href="#" >LOCATION</a> 
      <a class="item" href="#" >CONTACT</a> 
      <a class="item" href="#" >MAP</a> 
     </div> 
     <script> 
     var anchorArr=document.getElementsByTagName("a"); 
     var prevA=""; 
     for(var i=0;i<anchorArr.length;i++) 
     { 
      anchorArr[i].onclick = function(){ 
       if(prevA!="" && prevA!=this) 
       { 
        prevA.className="item"; 
       } 
       this.className="item selected"; 
       prevA=this; 
      } 
     } 
     </script>

來源

2014-03-28 user3473970