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!
Je pense que ce que vous recherchez est une fonctionnalité de connexion. –
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
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. –