Saludos,
Tengo un menu horizontal hecho con CSS, la cosa es que quería que al dar click a un elemento del menu este cambie su aspecto, ok, eso lo logre, por ejemplo: en la barra de menu, hay el menú NOSOTROS, al darle click quiero que cambie el color de fondo del elemento y que vaya a la pagina nosotros.php, el aspecto del elemento cambia, pero cuando va a la pagina nosotros.php el elemento vuelve a como estaba.
Alguna idea de como puedo hacerlo?
Lo que hice esta
aqui
aqui el css de esa parte:
Código PHP:
#menu {
width: 950px;
height: 40px;
background: url(../imgs/menu.png) no-repeat;
padding: 9px;
color: #FFFFFF;
}
#menu li {
display: inline;
color: #FFFFFF;
font-family: "Trebuchet MS";
font-size: 15px;
font-weight: bold;
padding: 25px;
}
#menu li:hover {
background-color: #CC6600;
cursor: pointer;
}
Aqui el HTML:
Código PHP:
<div id="menu">
<li id="mnunosotros">NOSOTROS</li>
|
<li id="mnuservicios">SERVICIOS</li>
|
<li id="mnuclientes">CLIENTES</li>
|
<li id="mnusoporte">SOPORTE</li>
|
<li id="mnucontactenos">CONTACTENOS</li>
<span class="menusolo"><a href="">INICIE SESION</a></span>
</div>
Y aqui como hice que cambie el aspecto:
Código PHP:
$(document).ready(function() {
$("#mnunosotros").click(function() {
$(this).addClass("menuseleccionado");
$("#mnuservicios").removeClass("menuseleccionado");
$("#mnuclientes").removeClass("menuseleccionado");
$("#mnusoporte").removeClass("menuseleccionado");
$("#mnucontactenos").removeClass("menuseleccionado");
});
$("#mnuservicios").click(function() {
$(this).addClass("menuseleccionado");
$("#mnunosotros").removeClass("menuseleccionado");
$("#mnuclientes").removeClass("menuseleccionado");
$("#mnusoporte").removeClass("menuseleccionado");
$("#mnucontactenos").removeClass("menuseleccionado");
});
$("#mnuclientes").click(function() {
$(this).addClass("menuseleccionado");
$("#mnuservicios").removeClass("menuseleccionado");
$("#mnunosotros").removeClass("menuseleccionado");
$("#mnusoporte").removeClass("menuseleccionado");
$("#mnucontactenos").removeClass("menuseleccionado");
});
$("#mnusoporte").click(function() {
$(this).addClass("menuseleccionado");
$("#mnuservicios").removeClass("menuseleccionado");
$("#mnuclientes").removeClass("menuseleccionado");
$("#mnunosotros").removeClass("menuseleccionado");
$("#mnucontactenos").removeClass("menuseleccionado");
});
$("#mnucontactenos").click(function() {
$(this).addClass("menuseleccionado");
$("#mnuservicios").removeClass("menuseleccionado");
$("#mnuclientes").removeClass("menuseleccionado");
$("#mnusoporte").removeClass("menuseleccionado");
$("#mnunosotros").removeClass("menuseleccionado");
});
});
Quiero que cuando vaya a la pagina que corresponda, el aspecto del elemento alq ue le di click se quede como cuando le di click y no regrese a como estaba al inicio.
Gracias de antemano.