Foros del Web » Creando para Internet » CSS »

Marcar enlace de lista seleccionado

Estas en el tema de Marcar enlace de lista seleccionado en el foro de CSS en Foros del Web. Hola. Tengo un ejemplo como este @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < style > ul {     list-style: none;     margin: 0; ...
  #1 (permalink)  
Antiguo 07/09/2010, 01:19
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 9 meses
Puntos: 6
Marcar enlace de lista seleccionado

Hola. Tengo un ejemplo como este

Código HTML:
Ver original
  1. ul {
  2.     list-style: none;
  3.     margin: 0;
  4.     padding: 0;
  5.     }
  6.  
  7. img {
  8.     border: none;
  9.     }
  10.    
  11. #menu_lat_izqdo {
  12.     width: 100%;
  13.     }
  14.    
  15. #menu_lat_izqdo li a {
  16.     text-decoration: none;
  17.     margin:0;
  18.     border:0;
  19.     padding:0;
  20.     }  
  21.    
  22. #menu_lat_izqdo li a:link, #menu_lat_izqdo li a:visited {
  23.     display: block;
  24.     background-image: url(../imagenes/lat_izqdo/menu_claro.gif);
  25.     background-repeat: no-repeat;
  26.     color: #8BADCF;
  27.     }
  28.    
  29. #menu_lat_izqdo li a:hover {
  30.     background:  url(../imagenes/lat_izqdo/menu_oscuro.gif);
  31.     background-repeat: no-repeat;
  32.     color: #627EB7;
  33.     }
  34.  
  35. #menu_lat_izqdo li a:link, #menu_lat_izqdo li a:visited, #menu_lat_izqdo li a:hover {
  36.     padding-top: 5px;
  37.     padding-bottom: 5px;
  38. }
  39.  
  40. <div id="lat_izqdo">
  41.    
  42.  <div id="menu_lat_izqdo">
  43.   <ul>
  44.    <li>
  45.      <h3><a href="prueba.html">CSS Templates</a></h3>
  46.    </li>
  47.    <li>
  48.      <h3><a href="prueba.html">CSS Layouts</a></h3>
  49.    </li>
  50.    <li>
  51.      <h3><a href="prueba.html">CSS Books</a></h3>
  52.    </li>
  53.   </ul>
  54.  </div>
  55.    
  56. </div>

Lo que quiero es que, cuando pulse una upcion de la lista, que se quede marca esa opcion, es decir, si marco la opcion CSS Templates, al carga la pagina, CSS Templates quedaría con un fondo rojo, por ejemplo, y las otras dos opciones de la lista (CSS Layouts y CSS Books), quedarían con su fondo original.

Espero haberme explicado.

Gracias. Un saludo.
  #2 (permalink)  
Antiguo 07/09/2010, 16:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Marcar enlace de lista seleccionado

Hola:

Deberás definir los estilos de la clase activo, por ejemplo, y en el html de la página CSS templates indicar que está activa:

Código CSS:
Ver original
  1. a:activo {
  2.     ......
  3. }

Código HTML:
Ver original
  1. <div id="menu_lat_izqdo">
  2.   <ul>
  3.    <li>
  4.      <h3><a class="activo" href="prueba.html">CSS Templates</a></h3>
  5.    </li>
  6.    <li>
  7.      <h3><a href="prueba.html">CSS Layouts</a></h3>
  8.    </li>
  9.    <li>
  10.      <h3><a href="prueba.html">CSS Books</a></h3>
  11.    </li>
  12.   </ul>
  13.  </div>

Saludos.

  #3 (permalink)  
Antiguo 08/09/2010, 00:06
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 9 meses
Puntos: 6
Respuesta: Marcar enlace de lista seleccionado

Ok. Así es como lo hize. Muchas gracias.

Etiquetas: enlace, lista, seleccionado
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 20:16.