Buenos dias,
Tengo un html con varias secciones fullscreen, las cuales se van desplazando segun la seccion que se visite, en un menu con 5 botones estos hacen un rollover que desplaza el background del boton para que cambie de color. Al ser presionados quedan activos, osea que hace la funcion del rollover y queda en esa posicion, de la siguiente manera y desplaza a la seccion que corresponde.
HTML:
Código:
<ul class="botones-menu">
<a id="uno" href="#home"><li class="home_btn active">Home</li></a>
<a id="dos" href="#empresa"><li class="empresa">Empresa</li></a>
<a id="tres" href="#servicios"> <li class="servicioS">Servicios</li></a>
</ul>
CSS:
Código:
ul.botones-menu li {
float: left;
display:block;
margin: 0;
cursor: pointer;
padding: 2px 8px ;
height: auto;
overflow: hidden;
position: relative;
}
ul.botones-menu li:hover {
color: #28c9ee;
}
ul.botones-menu li.active{
background-position:left 30px;
}
JS:
Código:
var j = jQuery.noConflict();
j(document).ready(function() {
j("ul.botones-menu li").click(function() {
j("ul.botones-menu li").removeClass("active");
j(this).addClass("active");
var activeTab = $(this).attr("rel");
j("#"+activeTab).fadeIn();
});
});
El problema es que tengo ademas del menu, dos botones laterales de next y prev para poder correr si se desea a la seccion siguiente o anterior.
Código:
<div class="next">
<a href="#home"> <img class="icon" src="imagenes/flecha_derecha.png" width="61" height="208"></a>
</div>
<div class="back">
<a href="#servicios"> <img class="icon" src="imagenes/flecha_izquierda.png" width="61" height="208"></a>
</div>
Estas flechas van cambiando segun la seccion a la que desplace, la pregunta es como hago para que estando en HOME al hacer click en la flecha next cambie la class del boton empresa a activo como si se hubiese echo el click en ese boton.
Dejo una imagen para que se entienda mejor.
Espero que alguien me ayuda, gracias.
Saludos.