Boton con estado "seleccionado"

Citar

Escrito el 24 May 2011 10:13 pm

Hola chicos/as,
estoy tratando de programar 3 botones que funcionen con 3 estados, la idea es que al hacer click en uno (siempre todo en la misma página), quede seleccionado para guiar al usuario donde nos encontramos.

Entonces sería:
estado "off"
estado "rollover"
estado "selección actual"

Espero puedan ayudarme.
Saludos!

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 25 May 2011 12:42 am

Solo debes crear distintas clases en el css:

.clase a{ (estado off)
color: #ff0000;
}
.clase a:hover{ (estado rollover)
color:#ffcc00;
}
.clase a.seleccionado { (estado selección actual).
color:#000;
}

Y cuando estés haciendo el HTML en la página actual, al botón que carga esa página le pones el enlace así:
<a href="#" class="seleccionado">

Espero que te haya servido! cualquier duda me cuentas... Te espero por mi sitio para cualquier cosa

Por mishesblog

23 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Blog Diseño Latinoamericano

@mishesblog

Citar

Escrito el 26 May 2011 03:32 pm

mishesblog escribió:

Solo debes crear distintas clases en el css:

.clase a{ (estado off)
color: #ff0000;
}
.clase a:hover{ (estado rollover)
color:#ffcc00;
}
.clase a.seleccionado { (estado selección actual).
color:#000;
}

Y cuando estés haciendo el HTML en la página actual, al botón que carga esa página le pones el enlace así:
<a href="#" class="seleccionado">

Espero que te haya servido! cualquier duda me cuentas... Te espero por mi sitio para cualquier cosa

Bien, entiendo lo que me propones. Esto serviría si tengo una página para cada sección.
Pero el problema es que no existe un menú para cada página, sinó que el menú es siempre el mismo HTML (o php), y lo que cambia es el contenido del div de abajo. Espero me entiendas.

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 26 May 2011 03:50 pm

Tendrias que usar el ejemplo que te dio @mishesblog pero agregando las clases dinamicamente con JavaScript.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 26 May 2011 03:52 pm

Ramm escribió:

Tendrias que usar el ejemplo que te dio @mishesblog pero agregando las clases dinamicamente con JavaScript.

Imaginé que por ahí iba el tema.
¿ Me podrías dar una idea, o algun link para saber como encarar el script ?.

Gracias

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 26 May 2011 03:54 pm

Se me ocurrió también que se podría hacer con botones tipo "radio buttons", pero no se puede modificar el iconito de selección con css, se puede agregar un fondo, tamaño, etc, pero no el boton que viene por defecto en dreaweaver por ej.

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 26 May 2011 05:06 pm

Es basicamente algo asi:
http://www.desarrolloweb.com/articulos/anadir-quitar-class-jquery.html

o

El primero de aqui:
http://blogandweb.com/javascript/5-snippets-jquery-para-manipular-tu-sitio-web/

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 27 May 2011 02:07 am

Ramm escribió:

Es basicamente algo asi:
http://www.desarrolloweb.com/articulos/anadir-quitar-class-jquery.html

o

El primero de aqui:
http://blogandweb.com/javascript/5-snippets-jquery-para-manipular-tu-sitio-web/

Estuve armando el código, pero hay algo que estoy haciendo mal:
es así:

Código HTML :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#boton").click(function () { $("#header").addClass("alternativo"); })
</script>
<link href="class.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">header</div>
<div><a href="#" id="boton"><img src="alquiler-off.png" width="87" height="39" border="0" /></a></div>
</body>
</html>

el CSS

Código :

#header {width:300px; height:50px; background-color:#0C0;}

.alternativo {width:300px; height:50px; background-color:#CCCCCC;}

#boton {width:300px; height:50px; background-color:#0CC;}

me puedes dar una mano por favor? Gracias.

Por mbascolo

48 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Programación Sitios Web

Citar

Escrito el 01 Feb 2013 06:09 pm

Aquí tienes un ejemplo con 4 botones, el activo es el que tiene opacidad 0.5 por destacarlo de alguna manera, supongo que esto es lo que buscabas, aunque la ayuda te llegue tarde...

<html>
<head>
<title>Añadir y quitar clases CSS a elementos</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">

.clase2css{
opacity: 0.5;

}

</style>
<script>

var boton_activo = 0; //ninguno

$(document).ready(function(){

$("#boton1").mouseover(function(event){
$("#boton1").addClass("clase2css");
});
$("#boton1").mouseout(function(event){
if (boton_activo != 1) {
$("#boton1").removeClass("clase2css");
}
});
$("#boton1").click(function(event){
$("#boton1").addClass("clase2css");
boton_activo = 1;
$("#boton2").removeClass("clase2css");
$("#boton3").removeClass("clase2css");
$("#boton4").removeClass("clase2css");
});

$("#boton2").mouseover(function(event){
$("#boton2").addClass("clase2css");
});
$("#boton2").mouseout(function(event){
if (boton_activo != 2) {
$("#boton2").removeClass("clase2css");
}
});
$("#boton2").click(function(event){
$("#boton2").addClass("clase2css");
boton_activo = 2;
$("#boton1").removeClass("clase2css");
$("#boton3").removeClass("clase2css");
$("#boton4").removeClass("clase2css");
});

$("#boton3").mouseover(function(event){
$("#boton3").addClass("clase2css");
});
$("#boton3").mouseout(function(event){
if (boton_activo != 3) {
$("#boton3").removeClass("clase2css");
}
});
$("#boton3").click(function(event){
$("#boton3").addClass("clase2css");
boton_activo = 3;
$("#boton1").removeClass("clase2css");
$("#boton2").removeClass("clase2css");
$("#boton4").removeClass("clase2css");
});

$("#boton4").mouseover(function(event){
$("#boton4").addClass("clase2css");
});
$("#boton4").mouseout(function(event){
if (boton_activo != 4) {
$("#boton4").removeClass("clase2css");
}
});
$("#boton4").click(function(event){
$("#boton4").addClass("clase2css");
boton_activo = 4;
$("#boton1").removeClass("clase2css");
$("#boton2").removeClass("clase2css");
$("#boton3").removeClass("clase2css");
});

});
</script>
</head>

<body>

<a href="#" id="boton1"><img src="boton1.png" border="0" /></a>
<a href="#" id="boton2"><img src="boton2.png" border="0" /></a>
<a href="#" id="boton3"><img src="boton3.png" border="0" /></a>
<a href="#" id="boton4"><img src="boton4.png" border="0" /></a>

</body>
</html>

Por aadriann

0 de clabLevel

Envíale un mensaje privado

Boton con estado "seleccionado"

Escribe una respuesta rapida