Imprimir Página - Como hacer que desaparezca un DIV y aparezca otro en su lugar.

Título: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
Publicado por: hackmastter 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.??

Título: Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
Publicado por: MinusFour en 4 Septiembre 2015, 05:13 am

Con jQuery:

http://jsfiddle.net/8uzac2wq/

Título: Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
Publicado por: l337* en 21 Septiembre 2015, 23:49 pm

Cita de: MinusFour en 4 Septiembre 2015, 05:13 am

Con jQuery:

http://jsfiddle.net/8uzac2wq/

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>

Título: Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.
Publicado por: eLank0 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

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: hackmastter en 4 Septiembre 2015, 03:29 am