<ul> <li><a href="#informacion1">Mostrar información #1</a></li> <li><a href="#informacion2">Mostrar información #2</a></li> <li><a href="#informacion3">Mostrar información #3</a></li> </ul> <div id="informacion1" class="informacion"> Texto de información #1: ¡Interesante!<br /> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Icon-OK.jpg/35px-Icon-OK.jpg" alt="OK"/> </div> <div id="informacion2" class="informacion"> Texto de información #2: ¿Qué pasó? ¡Guau!<br /> <img src="http://upload.wikimedia.org/wikipedia/commons/d/d5/Face-angel.svg" alt="angel" /> </div> <div id="informacion3" class="informacion"> Texto de información #3: ¡Sé feliz con CSS3!<br /> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Gnome-face-smile-big.svg/92px-Gnome-face-smile-big.svg.png" alt="happy" /> </div>
.informacion { display: none; } .informacion:target { display: block; }
/* ¡NO NECESITA JAVASCRIPT! */