Tema: Alterar el estilo de un elemento externo.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/08/2013, 08:44
Avatar de replica
replica
 
Fecha de Ingreso: noviembre-2004
Mensajes: 68
Antigüedad: 19 años, 6 meses
Puntos: 2
Alterar el estilo de un elemento externo.
Hola, estoy intento hacer que los elementos de una página aparezcan y desaparezcan al pulsar sobre otros elementos diferentes.

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <style type="text/css">
  4.             section {display: none;}
  5.         </style>
  6.     </head>
  7.     <body>
  8.         <header>
  9.             <div>1</div>
  10.             <div>2</div>
  11.             <div>3</div>
  12.             <div>4</div>
  13.         </header>
  14.         <nav>
  15.             <div>5</div>
  16.             <div>6</div>
  17.             <div>7</div>
  18.             <div>8</div>
  19.         </nav>
  20.         <section>sec 1</section>
  21.         <section>sec 2</section>
  22.         <section>sec 3</section>
  23.         <section>sec 4</section>
  24.         <section>sec 5</section>
  25.         <section>sec 6</section>
  26.         <section>sec 7</section>
  27.         <section>sec 8</section>
  28.     </body>
  29. </html>

La idea es hacer una barra de navegación (en mi caso una superior y otra lateral, aunque no lo he puesto en el css), y que según clique sobre un div u otro (perfectamente sustituibles por <li>, <a>, checkbox, me da igual) provoque que los section aparezcan o no (section{display:block;}).

He probado ya con esas soluciones, e incluso con algún selector de css, sin éxito (es posible que me equivoque al utilizarlos). Los eventos que he utilizado son :active y :focus, sin ningún resultado (es curioso que css aún no tenga un :click o algo así).

Me conformo con lo que pido arriba. La guinda del pastel sería provocar que desaparecieran todos los section, y sólo se mostrara el que selecciono. Y la chica que sale de dentro del pastel sería provocar que el section a mostrar fuera el resultado tanto del click del nav combinado con el click en header.

No quiero utilizar Javascript. Intento mantener el código al mínimo, pero creo que al final tendré que ceder.

¿Alguien tiene alguna idea? Gracias.