Mostrar varios contenidos en DIV al hacer clic en enlaces sin JavaScript

  • Autor Autor foroblogger
  • Fecha de inicio Fecha de inicio
F

foroblogger

Delta
Verificado por Whatsapp
Buenas, no se si lo he explicado bien, a ver:

Tengo un DIV centrar contenedor donde quería mostrar varios DIV pulsando enlaces, uso esos enlaces como botones para mostrar los DIV, en teoría SIN JAVASCRIPT. Es para una pagina de clase y solamente puedo hacerlo con HTML5 y CSS.

He logrado mostrar con HOVER el DIV hijo en el padre, pero bien con HOVER o con un clic me gustaria mostrar diferentes DIVs.

No se si lo cuento bien, tengo un menu y quiero mostrar diferentes contenidos. ¿Alguien me dice si se puede?
 
jQuery amigo, que tiene de malo para que le quite "clase" a tu web ?

is the way.
 
a mostrar diferentes div's, te refieres a que con pasarle por encima a un enlace (o lo que sea) se muestren varios div's diferentes o que haya un enlace para ir mostrando 1 div diferente cada uno?

Saludos!!

- - - Actualizado - - -

alejandrogm dijo:
jQuery amigo, que tiene de malo para que le quite "clase" a tu web ?

is the way.
Hacer clic para expandir...

me imagino que con "clase" se refiere a un trabajo de escuela o algo asi, no que que quiere una web con clase 😀
 
Jajaja, si, me refiero a un trabajo del instituto, no a que tenga clase, sino me lo hacia con Ajax y a correr.

El caso es que no consigo que al pasar sobre un div que uso como boton aparezca un div noticia en un div contenedor, por ejemplo, ahora no tengo el codigo a mano, pero mas o menos lo que quiero es algo como esto, a ver, a pelo y sin proteccion:

Mas o menos, habra errores eh

<html>
<head>
<style type="txt/css">
#boton1 #mostrar1{display:block;}
#boton2 #mostrar2{display:block;}
</style>
</head>
<body>
<div id="izquierda" style="float:left;">
<div id="boton1">
Boton1
</div>
<div id="boton2">
Boton2
</div>
</div>

<div id="contenedor" style="float:right;">
<div id="mostrar1" style="display:none;">
muestra1
</div>
<div id="mostrar2" style="display:none;">
muestra2
</div>
</div>
</body>
</html>
 
Probá esto. Puse el position: absolute; y right: 0; para que se vea como querés en el ejemplo, pero es algo que tendrías que modificar.

Insertar CODE, HTML o PHP: 
    <html>
    <head>
    <style type="text/css">
    #boton1:hover +  #mostrar1{display:block !important;}
    #boton2:hover + #mostrar2{display:block !important;}
    </style>
    </head>
    <body>
    <div id="izquierda" style="float:left;">
        <div id="boton1">Boton1</div>
              <div id="mostrar1" style="display:none; position: absolute; right: 0;">muestra1</div>
        <div id="boton2">Boton2</div>
                <div id="mostrar2" style="display:none; position: absolute; right: 0;">muestra2</div>
    </div>
    </body>
    </html>
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba