elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como hacer que desaparezca un DIV y aparezca otro en su lugar.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como hacer que desaparezca un DIV y aparezca otro en su lugar.  (Leído 3,363 veces)
hackmastter

Desconectado Desconectado

Mensajes: 60



Ver Perfil
Como hacer que desaparezca un DIV y aparezca otro en su lugar.
« en: 4 Septiembre 2015, 03:29 am »

Hola a todos...

Si tengo una lista:

Código:
<div id="lista" style="">
     <ul>
          <li>Div1</li>
          <li>Div2</li>
          <li>Div3</li>
          <li>Div4</li>
     </ul>
</div>

<!-- Como hago para que al Clicar sobre Div1 aparezca lo que serìa un: -->

<div id="Div1" style="">
     Contenido
</div>

<!-- Pero si hago click en <li>Div2</li> entonces <div id="Div1">
desaparece y aparece <div id="Div2"> en su lugar  -->

Las opciones que conozco son
  • Un Iframe
  • Una caja con overflow: scroll; y <li><a href="#"Div1">Div1</a></li> para que baje.
  • Y la última es el mismo overflow: hidden; este es tipo Slider con <input type="radio" id="Div1"> y puede ser también con el <label for="Div1"></label>

Pero quiero saber si existe otra manera, ya que el Iframe no me gusta para esto y el Overflow implicaria que la cancion dentro de los DIV quedaria sonando y/o cargando cuando la caja DIV se desplase.

Ya sé que este no es el foro. Pero será que se puede con PHP llamando una variable llena de código HTML.??


En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
« Respuesta #1 en: 4 Septiembre 2015, 05:13 am »

Con jQuery:

http://jsfiddle.net/8uzac2wq/


En línea

l337*


Desconectado Desconectado

Mensajes: 1.016


I've been thinking...


Ver Perfil
Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
« Respuesta #2 en: 21 Septiembre 2015, 23:49 pm »


ughh no!

mas sencillo:
https://api.jquery.com/detach/

Código:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>detach demo</title>
  <style>
  p {
    background: yellow;
    margin: 6px 0;
  }
  p.off {
    background: black;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
 
<script>
$( "p" ).click(function() {
  $( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).detach();
  }
});
</script>
 
</body>
</html>
En línea

eLank0
eLhAcKeR r00Lz


Desconectado Desconectado

Mensajes: 1.062



Ver Perfil WWW
Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
« Respuesta #3 en: 22 Septiembre 2015, 02:30 am »

Con las directivas ng-show y ng-hide de AngularJS puedes hacerlo de manera muy muy sencilla.

Por ejemplo:

http://plnkr.co/edit/AUn7ZeGrsk1ALPfPi4b1?p=preview

Salu2
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines