Hola a todos...
Si tengo una lista:
<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.??
Con jQuery:
http://jsfiddle.net/8uzac2wq/
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/
<!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>
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