1
votes

Classe de navigation active basée sur le problème d'URL actuel

J'ai le menu HTML suivant:

jQuery(function($){
    var current = location.pathname;
    $('.nav ul li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

Et puis j'ai ce code:

<div class="nav">
            <ul>
                <li class="first"><a href="/">Home</a></li>
                <li><a href="/something/">Something</a></li>
                <li><a href="/else/">Else</a></li>
                <li class="last"><a href="/random/">Random</a></li>
            </ul>
            <ul style="float:right;">   
                <li class="first last"><a href="/news/">News</a></li>
            </ul>
        </div>
    </div>

Le code fonctionne très bien, mais il a un problème. Par exemple, si je vois la page d'accueil (www.example.com), tous les liens de menu reçoivent la classe active. Un autre problème serait que cela fonctionne très bien pour www.example.com/something mais il ne le maintient pas actif si je vais sur www.example.com/something/1 etc. Une idée de comment résoudre ce problème? Merci d'avance!

javascript jquery html css

0 commentaires

3 Réponses :

0
votes

Utilisez le code jQuery ci-dessous pour ajouter la classe active :

$(function() {
      var pgurl = window.location.href.substr(window.location.href
         .lastIndexOf("/") + 1);
      $(".nav ul li a").each(function() {
         if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
            $(this).addClass("active");
      })
   });

1 commentaires

Merci pour votre réponse, mais cela ne semble pas fonctionner.

1
votes

Pour la page d'accueil, ajoutez une classe supplémentaire "default" dans la liste comme.

 jQuery(function($){
        var current = location.pathname;
        console.log(current);
        //remove the active class from list item. 
        $('.nav ul li a').removeClass('active');

        if(current != '/'){
            $('.nav ul li a').each(function(){
                var $this = $(this);
                // if the current path is like this link, make it active
                if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
                    $this.addClass('active');
                }
            })
        }else{
             console.log('home');
            $('.default a').addClass('active');
        }
    })

jquery code.

<li class="first default"><a href="/">Home</a></li>

10 commentaires

Merci, mais ça ne marche pas. La page d'accueil est activée mais les autres ne sont pas reconnues.

supprimer la barre oblique de fin de l'élément de liste. comme -

Quelque chose

Je peux vous donner TeamViewer. L'onglet Accueil reste activé tandis que les autres sont activés, désactivés. EDIT # 1: J'ai supprimé la barre oblique de fin, toujours rien.

pour www.example.com/quelque chose, le chemin actuel sera «/ quelque chose» mais dans l'élément de liste, vous utilisez / quelque chose /. pâte pour enlever la barre oblique et vérifier.

Je l'ai fait, mais si j'essaie d'accéder à la page par défaut, la première et la dernière classe li restent actives.

car dans le dernier élément, vous utilisez également la classe «premier».

Je vois ce que tu veux dire. pour résoudre ce problème, ajoutez la classe par défaut avec l'élément de page d'accueil. Je modifie mon code s'il vous plaît vérifier.

J'ai ajouté le code mis à jour mais l'onglet Accueil reste toujours actif.

Je modifie mon code s'il vous plaît vérifier. Je mets à jour la condition.

@Shivandra Singh vous êtes un génie!

0
votes

En utilisant indexOf (), vous vérifiez si la cible du lien est la même que l'emplacement actuel.

Ce que vous voulez, ce n'est pas "la même URL" mais "le même modèle", donc j'aurais tendance à utiliser un expression régulière:

let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
    $(this).addClass("active");
}

Notez que cela vous obligerait à créer une solution distincte pour votre lien vers la page principale, sinon elle serait toujours active.

0 commentaires