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>  <script> function ouvrirOuCacher(unId){ $("span.stoppedspan").fadeOut(); $("span#"+unId).fadeIn("slow"); }; </script> </HEAD>  <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>  <span class="stoppedspan" id ="connexion" style="position: absolute;">   <span class="stoppedspan" id ="inscription" style="display: none; position: absolute;">   <span class="stoppedspan" id ="securite" style="display: none; position: absolute;">  </BODY> </HTML>

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

Merci en avance :p

7 réponses

xBen,

il y a 10 ans

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

betaWeb,

il y a 10 ans

Salut

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

xBen,

il y a 10 ans

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>  <script> function ouvrirOuCacher(unId){ $("span.stoppedspan").fadeOut(); $("span#"+unId).fadeIn("slow"); }; $('.lien').click(function(e){ e.preventDefault(); return false;}); </script> </HEAD>  <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>  <span class="stoppedspan" id ="connexion" style="position: absolute;">   <span class="stoppedspan" id ="inscription" style="display: none; position: absolute;">   <span class="stoppedspan" id ="securite" style="display: none; position: absolute;">  </BODY> </HTML>

Merci en avance de ta part :D

betaWeb,

il y a 10 ans

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,

il y a 10 ans

Cela ne fonctionne toujours pas :/

<HTML> <HEAD>  <script> function ouvrirOuCacher(unId){ $("span.stoppedspan").fadeOut(); $("span#"+unId).fadeIn("slow"); }; $('.lien > a').click(function(e){ e.preventDefault(); return false; }); </script> </HEAD>  <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>  <span class="stoppedspan" id ="connexion" style="position: absolute;">   <span class="stoppedspan" id ="inscription" style="display: none; position: absolute;">   <span class="stoppedspan" id ="securite" style="display: none; position: absolute;">  </BODY> </HTML>

Merci de ta réponse :D

betaWeb,

il y a 10 ans

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

Jordan Taisne,

il y a 10 ans

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

<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>  <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>  <span class="stoppedspan" id="connexion"></span> <span class="stoppedspan" id="inscription"></span> <span class="stoppedspan" id="securite"></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