Como hacer que desaparezca un DIV y aparezca otro en su lugar.

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]

Autor

Tema: Como hacer que desaparezca un DIV y aparezca otro en su lugar. (Leído 3,378 veces)

hackmastter

Desconectado

Mensajes: 60

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

Mensajes: 5.529

I'm fourth.

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

Mensajes: 1.016

I've been thinking...

Re: Como hacer que desaparezca un DIV y aparezca otro en su lugar.

« Respuesta #2 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>


	En línea

eLank0

eLhAcKeR r00Lz

Desconectado

Mensajes: 1.062

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 a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Establecer PC de mi hogar como Proxy para usar desde otro lugar « 1 2 » Redes	choboku	10	15,620	19 Noviembre 2012, 22:54 pm por g4t0n3gr0
	Como hacer que al escrinbir en un textbox en otro salga otro texto .NET (C#, VB.NET, ASP)	Alexperto	9	6,687	15 Julio 2013, 21:32 pm por Eleкtro
	Microsoft ya no sabe cómo hacer que uses Bing en lugar de Google Noticias	wolfbcn	0	1,768	4 Junio 2017, 13:58 pm por wolfbcn
	Cómo hacer que Google Chrome descargue los PDF en lugar de abrirlos Noticias	wolfbcn	0	1,458	5 Julio 2018, 21:14 pm por wolfbcn
	¿Como puedo hacer que no se vea mi info en un IP logger como grafby u otro? Dudas Generales	R4X0	2	3,023	21 Diciembre 2021, 18:27 pm por el-brujo