Problèmes liés à une classe appelée «a: active» à l'aide de jQuery

Dans l'état actuel des choses, en cliquant sur «Lien», vous redirigez-le vers une page, mais chaque fois que vous cliquez sur et autour de celui-ci de sorte que le menu baisse ou monte, le code CSS

a:active span { color:#bdbcae; } 

Est mis en vigueur. Ce que j'essaie de faire, c'est de faire en sorte que le lien ne change que de couleur lorsque vous cliquez dessus la deuxième fois, ce qui vous permet d'être redirigé vers la page. Si vous cliquez dessus une seule fois afin que seul le menu baisse, je veux que le lien reste sa couleur par défaut.

C'est le code dans ma fonction ci-dessous que je cherchais à accomplir ceci

  if ($(this).data('clicks')==2){ $(this).data('clicks', 0); window.open("accomplishments.html"); } 

Je pensais ajouter quelque chose dans le sens de $(this).addClass("active") dans cette instruction if, mais cela ne fonctionne pas – et puis, faire faire $(this).removeClass("active") chaque fois que cela N'est pas le cas, mais rien de cela ne fonctionne. Voir mon code complet ci-dessous.

• Comment puis-je utiliser l'entrée Box ID de PHP vers JavaScript?
• Comment accéder à la session php dans le fichier javascript?
• Comment cacher et afficher div dans asp.net mvc 5 en utilisant dropdownlist change event
• Jquery valide la position d'erreur
• Les données transmises à d'autres pages via un lien hypertexte sont coupées

Voici mon Bootply .

HTML:

 <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="page.html" class="dropdown-toggle" data-toggle="dropdown"><span>Link</span><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul><!-- END: "dropdown-menu" --> </li><!-- END: "dropdown" --> </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" --> </div><!-- END: "container" --> </div><!-- END: "container" --> </div><!-- END: "navbar navbar-inverse navbar-fixed-top" --> 

CSS:

 a span { color:#ffffff; } a:hover *.caret { color:#bdbcae; } a:active span { color:#bdbcae; } a:active *.caret { color:#bdbcae; } 

JQuery:

 $(document).on("click", "span", function() { if(typeof $(this).data('clicks') == 'undefined') { $(this).data('clicks', 1); }else { $(this).data('clicks', $(this).data('clicks')+1); } if ($(this).data('clicks')==2){ $(this).data('clicks', 0); window.open("page.html"); } }); $(document).click(function(event) { if(!$(event.target).closest("span").length) { $("span").data('clicks', 0); } }); 

• Problèmes avec la table dynamique HTML et javascript
• Modification dynamique de la couleur de fond avec jquery
• Puis-je manipuler un document HTML externe avec JQuery?
• Javascript ne fera pas un postback à partir du code c # dans asp.net
• Pouvez-vous avoir une liste html dans une <textarea> et ça ressemble à une liste?