Mostrar vários conteúdos em DIV ao clicar em links sem JavaScript

  • Autor Autor foroblogger
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
F

foroblogger

Delta
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?
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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 - - -

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

is the way.

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.

Inserir CODE, HTML ou 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>
 
Voltar
Topo