Forum : Désactiver une <li>/<a> au clic..

Hello tous le monde !

Je suis donc en train de créer un site mais j'ai eu quelques petits problèmes...

J'ai voulu faire un site qui limite le nombre de requête pour ceux qui n'ont pas une super bonne connexion internet. J'ai donc créer dans la barre de navigation des liens comme CONNEXION, INSCRIPTION, etc.. puis lors du clic je fais disparaître une span avec le contenu qui va avec chaque "lien" et je fais apparaître une autre span lors du clic sur le lien dans la barre de navigation! Mais le problème est que j'aimerais désactiver le clic sur le lien lorsque l'on clique dessus, et le réactiver quand on clic sur un autre div..

Voici le code :

<HTML>
    <HEAD>

    <!-- puis contenu... -->

                <script>
        function ouvrirOuCacher(unId){
        $("span.stoppedspan").fadeOut();
        $("span#"+unId).fadeIn("slow");
        };
        </script>
    </HEAD>

    <!-- HEADER -->

    <BODY>
        <header>
             <div class="container header">
             <br/>
                 <img class="logo" src="templates/galerie/new-logo.png" onclick="document.location='index.php'" style="cursor: pointer;">
             </div>
             <br/>
             <br/>
        </header>
            <nav class="navbar back-nav">
                <div class="container">
                   <ul class="nav navbar-nav">
                        <li onclick="ouvrirOuCacher('connexion')"><a><span class="glyphicon glyphicon-user"></span>Connexion</span></a></li>
                        <li onclick="ouvrirOuCacher('inscription')"><a><span class="glyphicon glyphicon-pencil"></span>Inscription</a></li>
                        <li onclick="ouvrirOuCacher('securite')"><a><span class="glyphicon glyphicon-flag"></span>Sécurité</b></a></li>  
                    </ul>
                </div>
            </nav>
<!-- CONNEXION -->

    <span class="stoppedspan" id ="connexion" style="position: absolute;">

        <!-- puis contenu... -->

<!-- INSCRIPTION -->

    <span class="stoppedspan" id ="inscription" style="display: none; position: absolute;">

        <!-- puis contenu... -->

<!-- SECURITE -->

    <span class="stoppedspan" id ="securite" style="display: none; position: absolute;">

        <!-- puis contenu... -->
    </BODY>
</HTML>

Si vous voulez que je réexplique dites le moi !

Merci en avance :p

7 réponses

Jordan Taisne

Réponse acceptée

Je pense que c'est ca que tu cherche à faire :

<!-- le script dans le HEAD -->
<script>
    // tu défini quel section est active de base
    var currentSection = '#connexion';

    // la fonction pour ouvrir un section et cacher les autres
    function ouvrirOuCacher(target){
        // vérifie que la section n'est pas active
        if(currentSection !== target) {
            // mettre en cache la section à ouvrir
            var $section = $(target);

            // ferme les autres sections
            $section.siblings('span.stoppedspan').fadeOut();

            // affiche la section voulu
            $section.fadeIn("slow");

            // défini cette section comme active
            currentSection = target;
        }
    };

    // on ajout l'événement aux liens
    $('a.lien').on('click', function(e){
        // on empèche la redirection
        e.preventDefault();

        // on affiche la section voulu via son href
        ouvrirOuCacher($(this).attr('href'));
    });
</script>

<!-- Tes liens -->
<li><a href="#connexion" class="lien"><span class="glyphicon glyphicon-user"></span>Connexion</span></a></li>
<li><a href="#inscription" class="lien"><span class="glyphicon glyphicon-pencil"></span>Inscription</span></a></li>
<li><a href="#securite" class="lien"><span class="glyphicon glyphicon-flag"></span>Sécurité</span></a></li>

<!-- Tes sections -->
<span class="stoppedspan" id="connexion"><!-- contenu --></span>
<span class="stoppedspan" id="inscription"><!-- contenu --></span>
<span class="stoppedspan" id="securite"><!-- contenu --></span>

par contre, les span c'est pas top pour les sections (il vaut mieux des div je pense).
et il faut absoluement éviter les : onclick=""

Bon courage

betaWeb

Salut

$('.ton_element').click(function(e){
    e.preventDefault();
    return false;
});

xBen

Auteur

Déjà, merci d'avoir répondu aussi vite :D !
J'ai essayé ce que tu m'a envoyé mais cela ne fonctionne pas... Je me suis sûrement trompé dans le code mais où ?

<HTML>
    <HEAD>

    <!-- puis contenu... -->

                <script>
        function ouvrirOuCacher(unId){
        $("span.stoppedspan").fadeOut(); 
        $("span#"+unId).fadeIn("slow"); 
        };
        $('.lien').click(function(e){
        e.preventDefault();
        return false;});        
        </script>

    </HEAD>

    <!-- HEADER -->

    <BODY>
        <header>
             <div class="container header">
             <br/>
                 <img class="logo" src="templates/galerie/new-logo.png" onclick="document.location='index.php'" style="cursor: pointer;">
             </div>
             <br/>
             <br/>
        </header>
            <nav class="navbar back-nav">
                <div class="container">
                   <ul class="nav navbar-nav">
               <li onclick="ouvrirOuCacher('accueil')" class="lien"><a><span class="glyphicon glyphicon-home"></span>Accueil</a></li>
               <li onclick="ouvrirOuCacher('boutique')" class="lien"><a><span class="glyphicon glyphicon-shopping-cart"</span>Boutique</a></li>
               <li onclick="ouvrirOuCacher('journal')" class="lien"><a><span class="glyphicon glyphicon-bullhorn"></span>Journal</a></li>
               <li onclick="ouvrirOuCacher('communauté')" class="lien"><a><span class="glyphicon glyphicon-globe"></span>Communauté</a> 
                    </ul>
                </div>
            </nav>
<!-- CONNEXION -->

    <span class="stoppedspan" id ="connexion" style="position: absolute;">

        <!-- puis contenu... -->

<!-- INSCRIPTION -->

    <span class="stoppedspan" id ="inscription" style="display: none; position: absolute;">

        <!-- puis contenu... -->

<!-- SECURITE -->

    <span class="stoppedspan" id ="securite" style="display: none; position: absolute;">

        <!-- puis contenu... -->
    </BODY>
</HTML>

Merci en avance de ta part :D

betaWeb

C'est normal, il faut binder ton évent sur le lien lui-même et non le li:

$('.lien > a').click(function(e){
    e.preventDefault();
    return false;
});

xBen

Auteur

Cela ne fonctionne toujours pas :/

<HTML>
    <HEAD>

    <!-- puis contenu... -->

                <script>
        function ouvrirOuCacher(unId){
        $("span.stoppedspan").fadeOut(); 
        $("span#"+unId).fadeIn("slow"); 
        };
        $('.lien > a').click(function(e){
            e.preventDefault();
            return false;
        });    
        </script>

    </HEAD>

    <!-- HEADER -->

    <BODY>
        <header>
             <div class="container header">
             <br/>
                 <img class="logo" src="templates/galerie/new-logo.png" onclick="document.location='index.php'" style="cursor: pointer;">
             </div>
             <br/>
             <br/>
        </header>
            <nav class="navbar back-nav">
                <div class="container">
                   <ul class="nav navbar-nav">
               <li onclick="ouvrirOuCacher('accueil')" class="lien"><a><span class="glyphicon glyphicon-home"></span>Accueil</a></li>
               <li onclick="ouvrirOuCacher('boutique')" class="lien"><a><span class="glyphicon glyphicon-shopping-cart"</span>Boutique</a></li>
               <li onclick="ouvrirOuCacher('journal')" class="lien"><a><span class="glyphicon glyphicon-bullhorn"></span>Journal</a></li>
               <li onclick="ouvrirOuCacher('communauté')" class="lien"><a><span class="glyphicon glyphicon-globe"></span>Communauté</a></li> 
                    </ul>
                </div>
            </nav>
<!-- CONNEXION -->

    <span class="stoppedspan" id ="connexion" style="position: absolute;">

        <!-- puis contenu... -->

<!-- INSCRIPTION -->

    <span class="stoppedspan" id ="inscription" style="display: none; position: absolute;">

        <!-- puis contenu... -->

<!-- SECURITE -->

    <span class="stoppedspan" id ="securite" style="display: none; position: absolute;">

        <!-- puis contenu... -->
    </BODY>
</HTML>

Merci de ta réponse :D

betaWeb

Faut réfléchir un petit peu, on ne va pas tout te macher le boulot.

xBen

Auteur

Je viens de tester, et ça marche! Merci beaucoup d'avoir pris ton temps pour m'aider! Merci aussi betaWeb de m'avoir aidé :D