On my website I tried to give more style to the navigation bar, when a menu item has been hovered over the background color changes, what I am trying to do is when it has been clicked on/selected I want the background color to stay until another menu item has been clicked/selected.
I have already tried several examples of similar queries on this website but I can only get it partially working. It only works when the href="#" but when I replace this with href="homepage.html" the background color of the menu item will not stay and will change back.
As a single page it works fine however when I create pages for each item it no longer works.
<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>
