Foros del Web » Programando para Internet » Jquery »

Class active en boton al hacer click en otro div.

Estas en el tema de Class active en boton al hacer click en otro div. en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2013, 08:26
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 13 años
Puntos: 0
Class active en boton al hacer click en otro div.

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.
  #2 (permalink)  
Antiguo 05/12/2013, 09:10
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs. As., ARG
Mensajes: 203
Antigüedad: 14 años, 3 meses
Puntos: 6
Respuesta: Class active en boton al hacer click en otro div.

Y si pones el menú dentro de cada sección y su respectivo botón con una clase ".activo"?

Última edición por chuekeron; 05/12/2013 a las 09:29
  #3 (permalink)  
Antiguo 05/12/2013, 10:04
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 13 años
Puntos: 0
Respuesta: Class active en boton al hacer click en otro div.

Chuekeron, gracias por la respuesta.

Pude hacerlo con el js que me pasaste.

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(); 
});
j("#next-home").click(function () {
	j("ul.botones-menu li").removeClass("active");
  j(".empresa_btn").addClass('active'); 
});
});
Muchas gracias.

Saludos

Etiquetas: boton, class, funcion, html, javascript, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:00.