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

ceaped · #1 (**permalink**) 17/07/2017, 07:31

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

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prueba</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
        <script type="text/javascript">
            $(function(){
              $(".titulo").click( function(){
                  $(this).next().toggle('slow');
              });
            });
        </script>
        <style>
            .programa{border: 1px solid #ccc; padding: 5px; margin-bottom: 3px; width: 150px}
            .titulo{background: #ccc; cursor: pointer}
            .desc{display: none}
        </style>
    </head>
    <body>
        <div class="programa">
            <span class="titulo">Programa 1</span>
            <div class="desc">
                Descripción de prog 1
            </div>
        </div>
 
        <div class="programa">
            <span class="titulo">Programa 2</span>
            <div class="desc">
                Descripción de prog 2
            </div>
        </div>
    </body>
</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

Alexis88 · #2 (**permalink**) 17/07/2017, 09:04

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//Forma 1
$(".desc").first().toggle('slow');
 
//Forma 2
$($(".desc").get(0)).toggle('slow');
 
//Forma 3
$($(".desc")[0]).toggle('slow');
 
//Forma 4
$(".desc:eq(0)").toggle('slow');
 
//Forma 5
$(".desc:first").toggle('slow');
 
//...

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

Fuzzylog · #3 (**permalink**) 17/07/2017, 11:04

Más fácil si a cada div navegable se le asigna un ID.

ceaped · #4 (**permalink**) 17/07/2017, 12:37

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

Código Javascript:

Ver originaljQuery(document).ready(function(){ 
    $(".oculto").hide();              
    $(".revista").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide();                             
        $(nodo).fadeToggle( "slow" );
        return false;
          }
    });
});

Código HTML:

Ver original<li><a href='#div1' class='revista'>Edición mayo</a></li>
<li><a href='#div2' class='revista'>Edición agosto</a></li>

Código HTML:

Ver original<div id="div1" class="oculto">
     Contenido 1
</div>
 
 
<div id="div2" class="oculto">
     Contenido 2
</div>

Gracias por su ayuda

Alexis88 · #5 (**permalink**) 17/07/2017, 13:52

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

Ejemplo 1:

Código HTML:

Ver original<section>
    <div>
        <label class="content">Contenido 1</label>
    </div>
    <div>
        <label class="content">Contenido 2</label>
    </div>
    <div>
        <label class="content">Contenido 3</label>
    </div>
</section>

Solución:

Código Javascript:

Ver original$(".content:first").toggle("slow"); //Muestra el <label> de "contenido 1"

Ejemplo 2:

Código HTML:

Ver original<div>
    <p>
        <a class="enlace">Enlace 1</a>
    </p>
    <p>
        <a class="enlace">Enlace 2</a>
    </p>
    <p>
        <a class="enlace">Enlace 3</a>
    </p>
</div>

Solución:

Código Javascript:

Ver original$(".enlace:first").toggle("slow"); //Muestra el <a> de "enlace 1"

Ejemplo 3:

Código HTML:

Ver original<section>
    <div class="elements">
        <label>Input 1:</label>
        <input type="text" />
    </div>
    <div class="elements">
        <label>Input 2:</label>
        <input type="text" />
    </div>
    <div class="elements">
        <label>Input 3:</label>
        <input type="text" />
    </div>
</section>

Solución:

Código Javascript:

Ver original$(".elements:first").toggle("slow"); //Muestra el <div> del "input 1"

ArturoGallegos · #6 (**permalink**) 17/07/2017, 17:42

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

Código Javascript:

Ver originalvar url = window.location.href.split('#')[1];
$('#'+url).slideDown('slow');

Incluso te ayudaria al momento de compartir la URL para que no sea solo y forzosamente el primer DIV.

ceaped · #7 (**permalink**) 18/07/2017, 06:11

Hola Alexis88 y ArturoGallegos
Gracias por su ayuda.

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

Código Javascript:

Ver originaljQuery(document).ready(function(){ 
    $(".oculto").hide();
    $(".oculto:first").toggle("slow");
    $(".revista").click(function(){
          var nodo = $(this).attr("href");  
 
          if ($(nodo).is(":visible")){
               $(nodo).hide();
               return false;
          }else{
        $(".oculto").hide();                             
        $(nodo).fadeToggle( "slow" );
        return false;
          }
    });
});

¿Es la manera correcta de utilizarlo?

ArturoGallegos Como integro tu código al mio.

Gracias a ambos por su ayuda

ArturoGallegos · #8 (**permalink**) 18/07/2017, 07:57

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

Código Javascript:

Ver originalvar url = window.location.href.split('#')[1];
if(url){
    $('#'+url).slideDown('slow');
}else{
    $(".oculto:first").toggle("slow");
}

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/

ceaped · #9 (**permalink**) 18/07/2017, 08:27

Hola ArturoGallegos
Gracias por tu explicación.

Gracias a ambos por su ayuda