Foros del Web » Programando para Internet » Jquery »

Navegación entre varias div. Que se vea la div1 al abrir navegador

Estas en el tema de Navegación entre varias div. Que se vea la div1 al abrir navegador en el foro de Jquery en Foros del Web. Buenos días Encontré este ejemplo para navegar entre varias divs: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original < html >     < head >   ...
  #1 (permalink)  
Antiguo 17/07/2017, 07:31
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.131
Antigüedad: 15 años, 3 meses
Puntos: 9
Pregunta Navegación entre varias div. Que se vea la div1 al abrir navegador

Buenos días
Encontré este ejemplo para navegar entre varias divs:

Código HTML:
Ver original
  1.     <head>
  2.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.         <title>Prueba</title>
  4.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5.         <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
  6.         <script type="text/javascript">
  7.             $(function(){
  8.               $(".titulo").click( function(){
  9.                   $(this).next().toggle('slow');
  10.               });
  11.             });
  12.         </script>
  13.         <style>
  14.             .programa{border: 1px solid #ccc; padding: 5px; margin-bottom: 3px; width: 150px}
  15.             .titulo{background: #ccc; cursor: pointer}
  16.             .desc{display: none}
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div class="programa">
  21.             <span class="titulo">Programa 1</span>
  22.             <div class="desc">
  23.                 Descripción de prog 1
  24.             </div>
  25.         </div>
  26.  
  27.         <div class="programa">
  28.             <span class="titulo">Programa 2</span>
  29.             <div class="desc">
  30.                 Descripción de prog 2
  31.             </div>
  32.         </div>
  33.     </body>
  34. </html>

Tomado de: Mostrar/Ocultar varias capas con distintos id

Yo deseo que al abrir el navegador se visualice la "div1".

¿Cómo hago para que se cargue la div1 y que luego se pueda navegar entre las divs que se tengan?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 17/07/2017, 09:04
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 6 meses
Puntos: 928
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Selecciona al primer elemento del conjunto de divisiones con la clase "desc" y aplícale la tercera parte de la instrucción de la función: hacerlo visible mediante el método .toggle().

Código Javascript:
Ver original
  1. //Forma 1
  2. $(".desc").first().toggle('slow');
  3.  
  4. //Forma 2
  5. $($(".desc").get(0)).toggle('slow');
  6.  
  7. //Forma 3
  8. $($(".desc")[0]).toggle('slow');
  9.  
  10. //Forma 4
  11. $(".desc:eq(0)").toggle('slow');
  12.  
  13. //Forma 5
  14. $(".desc:first").toggle('slow');
  15.  
  16. //...

También puedes hacer a partir de una búsqueda iniciada en sus elementos ancestros.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #3 (permalink)  
Antiguo 17/07/2017, 11:04
Avatar de Fuzzylog  
Fecha de Ingreso: agosto-2008
Ubicación: En internet
Mensajes: 2.494
Antigüedad: 10 años, 8 meses
Puntos: 188
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Más fácil si a cada div navegable se le asigna un ID.
__________________
if (fuzzy && smooth) {
fuzzylog = "c00l";
return true;
}
  #4 (permalink)  
Antiguo 17/07/2017, 12:37
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.131
Antigüedad: 15 años, 3 meses
Puntos: 9
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Hola Alexis88 y Fuzzylog
Y con este otro código:

Código Javascript:
Ver original
  1. jQuery(document).ready(function(){
  2.     $(".oculto").hide();              
  3.     $(".revista").click(function(){
  4.           var nodo = $(this).attr("href");  
  5.  
  6.           if ($(nodo).is(":visible")){
  7.                $(nodo).hide();
  8.                return false;
  9.           }else{
  10.         $(".oculto").hide();                            
  11.         $(nodo).fadeToggle( "slow" );
  12.         return false;
  13.           }
  14.     });
  15. });

Código HTML:
Ver original
  1. <li><a href='#div1' class='revista'>Edición mayo</a></li>
  2. <li><a href='#div2' class='revista'>Edición agosto</a></li>

Código HTML:
Ver original
  1. <div id="div1" class="oculto">
  2.      Contenido 1
  3. </div>
  4.  
  5.  
  6. <div id="div2" class="oculto">
  7.      Contenido 2
  8. </div>

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #5 (permalink)  
Antiguo 17/07/2017, 13:52
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 6 meses
Puntos: 928
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

La lógica es la misma: toma al primer elemento de la colección y hazlo visible.

Ejemplo 1:
Código HTML:
Ver original
  1.     <div>
  2.         <label class="content">Contenido 1</label>
  3.     </div>
  4.     <div>
  5.         <label class="content">Contenido 2</label>
  6.     </div>
  7.     <div>
  8.         <label class="content">Contenido 3</label>
  9.     </div>

Solución:
Código Javascript:
Ver original
  1. $(".content:first").toggle("slow"); //Muestra el <label> de "contenido 1"

Ejemplo 2:
Código HTML:
Ver original
  1. <div>
  2.     <p>
  3.         <a class="enlace">Enlace 1</a>
  4.     </p>
  5.     <p>
  6.         <a class="enlace">Enlace 2</a>
  7.     </p>
  8.     <p>
  9.         <a class="enlace">Enlace 3</a>
  10.     </p>
  11. </div>

Solución:
Código Javascript:
Ver original
  1. $(".enlace:first").toggle("slow"); //Muestra el <a> de "enlace 1"

Ejemplo 3:
Código HTML:
Ver original
  1.     <div class="elements">
  2.         <label>Input 1:</label>
  3.         <input type="text" />
  4.     </div>
  5.     <div class="elements">
  6.         <label>Input 2:</label>
  7.         <input type="text" />
  8.     </div>
  9.     <div class="elements">
  10.         <label>Input 3:</label>
  11.         <input type="text" />
  12.     </div>

Solución:
Código Javascript:
Ver original
  1. $(".elements:first").toggle("slow"); //Muestra el <div> del "input 1"

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #6 (permalink)  
Antiguo 17/07/2017, 17:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.332
Antigüedad: 11 años, 2 meses
Puntos: 1040
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Si en la URL se muestra un ancla al DIV en cuestion puedes hacer algo como esto

Código Javascript:
Ver original
  1. var url = window.location.href.split('#')[1];
  2. $('#'+url).slideDown('slow');

Incluso te ayudaria al momento de compartir la URL para que no sea solo y forzosamente el primer DIV.
__________________
Se aceptan donaciones si lo consideras justo https://www.paypal.me/smartcodes
  #7 (permalink)  
Antiguo 18/07/2017, 06:11
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.131
Antigüedad: 15 años, 3 meses
Puntos: 9
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Hola Alexis88 y ArturoGallegos
Gracias por su ayuda.

Así me funcionó el código con el código de "Alexis88":

Código Javascript:
Ver original
  1. jQuery(document).ready(function(){
  2.     $(".oculto").hide();
  3.     $(".oculto:first").toggle("slow");
  4.     $(".revista").click(function(){
  5.           var nodo = $(this).attr("href");  
  6.  
  7.           if ($(nodo).is(":visible")){
  8.                $(nodo).hide();
  9.                return false;
  10.           }else{
  11.         $(".oculto").hide();                            
  12.         $(nodo).fadeToggle( "slow" );
  13.         return false;
  14.           }
  15.     });
  16. });
¿Es la manera correcta de utilizarlo?

ArturoGallegos Como integro tu código al mio.

Gracias a ambos por su ayuda
__________________
Diseñador Gráfico publicitario
  #8 (permalink)  
Antiguo 18/07/2017, 07:57
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.332
Antigüedad: 11 años, 2 meses
Puntos: 1040
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Mi codigo viene a complementar o reemplaza esta linea segun sea tu necesidad
$(".oculto:first").toggle("slow");

Código Javascript:
Ver original
  1. var url = window.location.href.split('#')[1];
  2. if(url){
  3.     $('#'+url).slideDown('slow');
  4. }else{
  5.     $(".oculto:first").toggle("slow");
  6. }

claro suponiendo que los div ocultos tienen un ID, por ejemplo
<div class="oculto" id="contacto">
<div class="oculto" id="nosotros">
<div class="oculto" id="productos">

y que los botones que hacen se muestre sean enlaces que apuntan a esos ID/Anclas
<a href="contacto">
<a href="nosotros">
<a href="productos">

junto con esa estructura incluso puedes presidir de la función toggle de jquery y en su lugar utilizar target de CSS, por ejemplo
https://jsfiddle.net/arturogallegos/4cq71zkv/
__________________
Se aceptan donaciones si lo consideras justo https://www.paypal.me/smartcodes

Última edición por ArturoGallegos; 18/07/2017 a las 08:03
  #9 (permalink)  
Antiguo 18/07/2017, 08:27
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.131
Antigüedad: 15 años, 3 meses
Puntos: 9
Respuesta: Navegación entre varias div. Que se vea la div1 al abrir navegador

Hola ArturoGallegos
Gracias por tu explicación.

Gracias a ambos por su ayuda
__________________
Diseñador Gráfico publicitario

Etiquetas: navegador, vea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:20.