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

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ubicar div debajo de texto al dar clic en este
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ubicar div debajo de texto al dar clic en este  (Leído 2,760 veces)
Hadess_inf
Desesperado
Colaborador
***
Desconectado Desconectado

Mensajes: 2.048


Nueva Vida


Ver Perfil WWW
Ubicar div debajo de texto al dar clic en este
« en: 22 Noviembre 2012, 07:10 am »

Hola buen día, haber si alguien me da una mano. Como tendría que hacer para que un div se ubique debajo de una etiqueta li cuando doy clic en ella.

Ejemplo:

<ul>
   <li>UNO</li>
   <li>DOS</li>
   <li>TRES</li>
</ul>

<DIV></DIV>

Al dar clic en :
- UNO se cargara un contenido en el div (pero este se debe de ubicar debajo de UNO)
- DOS se cargara un contenido en el div (pero este se debe de ubicar debajo de DOS)
- TRES se cargara un contenido en el div (pero este se debe de ubicar debajo de TRES)

La idea es que según sea el caso el div debe ponerse debajo de cada li.

Gracias desde ya.
Saludos.


En línea

Beakman

Desconectado Desconectado

Mensajes: 190



Ver Perfil WWW
Re: Ubicar div debajo de texto al dar clic en este
« Respuesta #1 en: 22 Noviembre 2012, 07:47 am »

Podés hacerlo con javascript (o jquery). Y creo que sería más sencillo con tres divs. Y simplemente mostrarlos al hacer click, y ocultarlos cuando se haga click en otra parte.


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Ubicar div debajo de texto al dar clic en este
« Respuesta #2 en: 24 Noviembre 2012, 18:41 pm »

Aunque estoy de acuerdo con @Beakman, puedes usar jQuery para hacerlo fácilmente.

Ejemplo:
Código
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.   $('ul > li').click(function(){
  4.      // Obtenemos el LI que se ha clickeado.
  5.      var item = $(this);
  6.      // Cogemos el div con id "contenido" y lo soltamos.
  7.      var contenido = $('#contenido').detach();
  8.      //  Insertamos el div despues del LI que hemos clickeado.
  9.      contenido.insertAfter(item);
  10.   });
  11. });
  12. </script>

PD: Notese que detach(); No hace falta. Pero he leído en algunos sitios que solo con insertAfter acaba haciendo 2 copias del elemento en algunos teléfonos móviles.

Saludos
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
¿Que fuente de texto será este?
Foro Libre
WHK 4 2,604 Último mensaje 6 Junio 2011, 01:43 am
por WHK
Hola necesito que alguien me diga como desisfrar este texto « 1 2 3 »
Hacking Wireless
El_Andaluz 20 15,147 Último mensaje 28 Agosto 2012, 02:09 am
por P4nd3m0n1um
Evento clic y zona de texto SDL
Programación C/C++
Puntoinfinito 0 1,740 Último mensaje 15 Abril 2013, 23:06 pm
por Puntoinfinito
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines