2016-11-02 1 views
1

je un menu dans l'en-tête avec la structure suivanteExécuter la fonction onload ne première fois

$(document).ready(function(){ 
 
\t $('.dropdown').on('show.bs.dropdown', function(e){ 
 
\t \t $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
 
\t }); 
 
    $('.dropdown').on('hide.bs.dropdown', function(e){ 
 
    \t $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
 
    \t }); 
 

 
\t $('#entrar').click(function(e){ 
 
\t  $('#head').slideToggle(); 
 
    \t $(".boton").css("display","none"); 
 
    \t $("#secciones").slideToggle(); 
 
     $("#foot").slideToggle(); 
 
\t }); 
 
    $('#entrar').click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $(".principal").offset().top + 70 
 
    }, 700); 
 
    }); 
 
}); 
 

 
$(document).ready(init); 
 
\t function init(){ 
 
    var sec = document.getElementById("secciones"); 
 
    var he = document.getElementById("head"); 
 
    var fo = document.getElementById("foot"); 
 
    he.style.display = "none"; 
 
    sec.style.display = "none"; 
 
    fo.style.display = "none"; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="main_wrapper"> 
 
    <header id="head"> 
 
\t \t <div class="container"> 
 
\t \t \t <section class="row"> 
 
\t \t \t \t <article class="col-xs-3"> 
 
\t \t \t \t \t <h1 id="main_logo"> 
 
\t \t \t \t \t \t <a href="index.php"><img src="images/logo.png" alt=""></a> 
 
\t \t \t \t \t </h1> 
 
\t \t \t \t </article> 
 
\t \t \t \t <article class="col-xs-9"> 
 
\t \t \t \t \t <ul class="nav nav-pills" id="menu"> 
 
\t \t \t \t \t \t <li class="active"><a href="index.php">INICIO</a></li> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">MODELOS<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a class="sec_index" href="index.php#galeria">Modelos en Panamá</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a class="sec_index" href="index.php#blog">Últimas Entradas</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="blog.php">Blog Chicas507</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="glosario.php">Glosario de Términos</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">ANÚNCIATE<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a class="sec_index" href="index.php#paquetes">Paquetes</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="registro.php">Regístrate</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="recuperar.php">Recuperar Cuenta</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li><a class="sec_index" href="index.php#contacto">CONTACTO</a></li> 
 
\t \t \t \t \t \t <li><a href="about.php">INFORMACIÓN</a></li> 
 
\t \t \t \t \t \t <li><a href="login.php">INGRESA</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </article> 
 
\t \t \t </section> 
 
\t \t </div> 
 
\t </header> 
 
    <section class="principal" id="principal"> 
 
\t \t \t <div class="boton" id="entrar"><a href="#">ENTRAR</a></div> 
 
\t \t \t <div class="boton" id="salir"><a href="#">SALIR</a></div> 
 
\t \t </section> 
 
\t <section class="secciones" id="secciones"> 
 
     some sections 
 
    </section> 
 
    <footer id="foot"> 
 
    </footer> 
 
    </div> 
 
</body>

Et je les différentes sections de la page Web, certains des liens dans le menu obtient moi à la section dans l'index, par exemple les modèles # index. Tout fonctionne bien, mais voici la chose. J'ai un code JavaScript qui cache les sections et l'en-tête appelé init. J'utilise onload dans le corps pour appeler la fonction et un bouton "entrar" à afficher. Cela fonctionne, mais la fonction est appelée chaque fois que je recharge la page et je veux juste courir la première fois et quand la page est actualisée. Tout est affiché sans cliquer sur le bouton. De plus, je ne veux pas charger quand je change à une autre partie du site. Par exemple, si j'entre dans le blog et que je clique pour rentrer à la maison, la fonction se charge et je dois cliquer à nouveau sur "Entrer". Je ne veux pas ça.

J'ai essayé de résoudre ce problème, mais je ne trouve pas la solution. J'apprécie ton aide. S'il vous plaît!

+0

Je pense que ce que vous recherchez est une fonctionnalité de connexion. –

+0

Pourquoi utilisez-vous javascript pour faire quelque chose que CSS peut faire pour vous? Certes, il faudra avoir quelque chose côté serveur pour vérifier si oui ou non afficher le menu, mais oui ... utiliser javascript pour afficher/masquer les éléments de menu est mauvaise conception, et devrait être évitée. – junkfoodjunkie

+0

ce n'est pas, si je fais avec css seulement, puis à chaque fois que la page est chargée, le css s'appliquera, l'idée de faire avec javascript si pour contrôler quand le faire. –

Répondre

1

Vous pouvez définir un localStorage var si vous voulez persister après que le navigateur se ferme:

$(function() { 
    var visited = localStorage['visited']; 
    if (!visited) { 
     init(); 
     localStorage['visited'] = true; 
    } 

    function init() { 
     var sec = document.getElementById("secciones"); 
     var he = document.getElementById("head"); 
     var fo = document.getElementById("foot"); 
     he.style.display = "none"; 
     sec.style.display = "none"; 
     fo.style.display = "none"; 
    } 
}); 

Ou sessionStorage si vous voulez que cela se produise après que le navigateur est fermé:

$(function() { 
    var visited = sessionStorage['visited']; 
    if (!visited) { 
     init(); 
     sessionStorage['visited'] = true; 
    } 

    function init() { 
     var sec = document.getElementById("secciones"); 
     var he = document.getElementById("head"); 
     var fo = document.getElementById("foot"); 
     he.style.display = "none"; 
     sec.style.display = "none"; 
     fo.style.display = "none"; 
    } 
}); 
+0

¡cela fonctionne parfaitement! Merci beaucoup –

2

Vous pouvez utiliser HTML5 webstorage.

if (typeof(Storage) !== "undefined") 
    { 
     console.log("Your browser doesn't support webstorage"); 
    } 
    else if (sessionStorage.getItem("ui_flag") === null) // Check if the key is set. It's a self defined key. 
    { 
     sessionStorage.setItem("ui_flag", 1); // If not set, set it 
     $(document).ready(init); // Now call your init function here. This code will execute only once for a window. 
    } 
    else 
    { 
     //No Action. It's not the first time. 
    } 
0

Je voudrais aller avec un cookie, qui est destiné à stocker une petite valeur, où vous vérifiez simplement son existence.

Combiné avec CSS et vous obtenez une solution petite et efficace.

Avec le dessous CSS/JS, lorsque le chargement de la page première fois, il crée le cookie, la deuxième fois ajouter le loadedonce à l'élément html, puis les coups de pied CSS en montrant les éléments cachés

Par simplement déplacer la création de cookie au clic du bouton, il ne les montrera qu'après avoir cliqué sur ce bouton.

Depuis les cookies ne fonctionneront pas dans les extraits Stack, je fait une fiddle demo avec votre code

CSS

#secciones, #head, #foot, .loadedonce .boton { 
    display: none; 
} 
.loadedonce #secciones, .loadedonce #head, .loadedonce #foot { 
    display: block; 
} 

JS si la charge (soit dans la tête ou au début de votre fichier js)

(function(d) { 
    if (document.cookie.indexOf("loadedonce=yes") < 0) { 
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";  
    } else { 
    d.classList.add('loadedonce');  
    } 
})(document.documentElement); 

JS si le clic

(function(d) { 
    if (document.cookie.indexOf("loadedonce=yes") >= 0) { 
    d.classList.add('loadedonce');  
    } 
})(document.documentElement); 


$('#entrar').click(function() { 
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";  
});