hola buenas a todos tengo un problema aparentemente muy sencillo pero no puedo solucionarlo.
tengo hecho el menú de mi pagina que lo comparto en todas la páginas de la web
<span class="menu">
<ul id="tab_menu", class="nav">
<li><a class="nav4" href="#">Cruises</a></li>
<li><%= Html.ActionLink(Vuelos, "ShowFlights", "Home", null, new {@class = "nav3", onclick="changeMenu(this);" })%></li>
<li><%= Html.ActionLink(Viajes, "ShowVacationPackage", "Home", null, new { @class = "nav2", onclick="changeMenu(this);" })%></li>
<li><%= Html.ActionLink(Home, "Index", "Home",null, new { @class = "nav1", onclick = "changeMenu(this);" })%></li>
</ul>
</span>
Cuando paso por encima con el ratón la pestaña del menú cambia de color, y cuando le doy click también, pero quiero que se quede activada, la pestaña que toco.
Tengo una funcion javascript que mira que pestaña del menú he tocado y la pone como marcada... pero es como si la página se recargarse toda de nuevo y todo volviese a estar como el principio, sin ningún link activado.
este el código javascript, los marca todos como marcados pero igualmente después no se quedan marcados
<script type="text/javascript">
function changeMenu(obj) {
var lilist = document.getElementById('tab_menu');
var alist = lilist.getElementsByTagName('a');
var elem = "nav";
for (i = 0; i < alist.length; i++) {
var position = alist.length - i;
alist[i].className = elem.concat(position).concat("_over");
}
}
</script>
este es mi css
.nav { list-style: none;}
.nav li {position:absolute}
.nav li a {height:24px; display: block; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#ffffff; text-align: center; text-decoration:none; float:left}
.nav li .nav1 { width:140px; padding:14px 0 0 0; margin:0px }
.nav li .nav2 { width:208px; padding:14px 0 0 0; margin:0 0 0 97px }
.nav li .nav3 { width:145px; padding:14px 0 0 0; margin:0 0 0 264px }
.nav li .nav4 { width:145px; padding:14px 0 0 0; margin:0 0 0 367px }
.nav li .nav1:hover { background-image:url(images/nav1.png) }
.nav li .nav2:hover { background-image:url(images/nav2.png) }
.nav li .nav3:hover { background-image:url(images/nav3.png)}
.nav li .nav4:hover { background-image:url(images/nav4.png)}
.nav li .nav1_over { width:140px; padding:14px 0 0 0; background-image:url(images/nav1.png); margin:0px }
.nav li .nav2_over { width:208px; padding:14px 0 0 0; background-image:url(images/nav2.png); margin:0 0 0 97px}
.nav li .nav3_over { width:145px; padding:14px 0 0 0; background-image:url(images/nav3.png); margin:0 0 0 264px}
.nav li .nav4_over { width:145px; padding:14px 0 0 0; background-image:url(images/nav4.png); margin:0 0 0 367px}
Gracias de antemano