Comment rendre actif un élément en fonction d'une URL

Comment rendre actif un élément en fonction d'une URL. C'est un problème qui revient souvent, par exemple quand il s'agit de mettre visuellement en évidence un lien dans un menu de navigation comme «actif» ou «en cours».

 

Voici une solution en javascript et avec du jquery dedans. On peut choisir de traiter ce problème coté serveur mais c'est souvent pénible. Je vous propose donc une solution qui utilise une expression régulière et la compare à l'url.

// un peu de jquery
// le petit bout de code magique
$(function(){   
    var url = window.location.href;
    var baseUrl = ''; // url racine
    var rgx  = new RegExp(baseUrl);
    url = url.replace(rgx,'').replace(//$/,'');
    $('[data-active-on]').each(function(){      
        var rgx = new RegExp($(this).attr('data-active-on'));
        if ( rgx.test(url) ) {
           $(this).addClass('active');
        }
    });
});

Maintenant dans le code html il suffira d'un élément avec une propriété "data-active-on" contenant notre expression régulière et cela ajoutera la classe "active"  à l'élément si l'URL correspond.

Par exemple pour l'url "http://mon-site.fr/mon_dossier"

Si un élément data-active-on="/mon_dossier/*" est trouvé celui-ci ce verra attribué la class active.

 

Et voilà !