JQuery crée un lien dans le statut actif

Je travaille sur un modèle HTML, mais je ne peux pas toucher le code HTML, je ne peux travailler que sur les fichiers CSS et JS. Je ne peux en aucun cas modifier le code HTML.

Ce que j'essaie d'atteindre est de mettre certains liens en statut actif lorsque jQuery ou Javascript reconnaît que l'URL de la page actuelle est la même du lien que je souhaite mettre en état actif, sans modifier le code HTML.

Y a-t-il un moyen de le faire? J'ai essayé de plusieurs façons mais sans chance.

Voici le code HTML (Rappelez-vous que je ne peux pas l'éditer).

<span class="Tag_Nav_Aux"> <a href="/my-account/create-account.aspx">Create&nbsp;Account</a> &nbsp;|&nbsp; <a href="/my-account/login.aspx">Login</a> &nbsp;|&nbsp; <a href="/my-cart/default.aspx">My Cart</a> </span>

Le code jQuery ou Javascript devrait fonctionner sur différents liens, autres que ceux que j'ai signalés ci-dessus, puisque le HTML change lorsque l'utilisateur est connecté ou déconnecté. Donc, jQuery devrait pointer la classe Tag_Nav_Aux et ajouter la classe Active à n'importe quelle étiquette qu'elle trouvera qui possède le lien identique à celui de l'URL en cours.

Essayez ce script

 jQuery(function($){ $('.Tag_Nav_Aux a').filter(function(){ return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase(); }).addClass('active'); });

Et créer une règle CSS pour

 .Tag_Nav_Aux a.active{ // style you want the active link to have }

Vous pouvez faire quelque chose comme ça. Votre nom de fichier à partir de l'URL

 var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

Ensuite, retirez l'ancre de la navigation et appliquez une classe.

 $("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');

Ici, vous devez écrire une classe active CSS qui fera apparaître ce lien comme un lien actif.

 $(document).ready(function() { var url = window.location.href.toLowerCase(); $(".Tag_Nav_Aux a").each(function() { var $this = $(this); var href = $this.attr("href").toLowerCase(); if(url.indexOf(href) > -1) { $this.addClass("active"); } }); });

Je pense que vous devez vérifier l'URL de la page actuelle et attribuer une classe à l'élément comme actif.

Je fais habituellement class = "active" en fonction de la correspondance d'URL actuelle avec l'aide du code côté serveur.

Mais si vous ne voulez pas de code serveur, vous pouvez le faire avec l'aide de JavaScript

 var currentPage=window.location.href; if(currentPage=="") { //logic to find and add a Class for the proper anchor tag }