web-dev-qa-db-fra.com

Ajouter une classe de navigation active basée sur une URL

J'essaie d'ajouter une classe "active" (c'est-à-dire class = "active") à l'élément de liste de menus approprié en fonction de la page sur laquelle elle se trouve une fois la page chargée. Ci-dessous, le menu actuel. J'ai essayé chaque extrait de code que je pouvais trouver à cet égard et rien ne fonctionne. Alors, quelqu'un peut-il s'il vous plaît expliquer simplement où et comment ajouter du javascript pour définir cette tâche?

<ul id="nav">
    <li id="navhome"><a href="home.aspx">Home</a></li>
    <li id="navmanage"><a href="manageIS.aspx">Manage</a></li>
    <li id="navdocso"><a href="docs.aspx">Documents</a></li>
    <li id="navadmin"><a href="admin.aspx">Admin Panel</a></li>
    <li id="navpast"><a href="past.aspx">View Past</a></li>
</ul>

Voici un exemple du code javascript que je mets dans la balise head dans le maître de mon site. Qu'est-ce que je fais mal?

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {

        $(function () {
            $('li a').click(function (e) {
                e.preventDefault();
                $('a').removeClass('active');
                $(this).addClass('active');
            });
        });
    });
</script>
javascriptcssmenu
15
slybitz

La raison pour laquelle cela ne fonctionne pas, c'est parce que le javascript est en cours d'exécution, alors la page est rechargée, ce qui annule la classe 'active'. Ce que vous voulez probablement faire est quelque chose comme:

$(function(){
    var current = location.pathname;
    $('#nav 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');
        }
    })
})

Dans certains cas, cela ne fonctionnera pas (plusieurs liens similaires), mais je pense que cela pourrait fonctionner pour vous.

39
Rob M.

    jQuery(function($) {
     var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
     $('ul a').each(function() {
      if (this.href === path) {
       $(this).addClass('active');
      }
     });
    });
.active, a.active {
    color: red;
}
a {
    color: #337ab7;
    text-decoration: none;
}
li{
    list-style:none;
}
<h3>Add Active Navigation Class to Menu Item</h3> 

    <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/about/">About</a></li>
    </ul> 

<h2><a href="http://www.sweet-web-design.com/examples/active-item/active-class.html">Live Demo</a></h2>

9
Figar Ali

La version ES6 fonctionne correctement dans les cas où votre lien est dirigé vers "/ products" et que vous avez des subroutes, comme: "/ products/new", "/ products/edit", etc.

let switchNavMenuItem = (menuItems) => {

    var current = location.pathname

    $.each(menuItems, (index, item) => {

        $(item).removeClass('active')

        if ((current.includes($(item).attr('href')) && $(item).attr('href') !== "/") || ($(item).attr('href') === "/" && current === "/")){
            $(item).addClass('active')
        }
    })
}

$(document).ready(() => {   
    switchNavMenuItem($('#nav li a, #nav li link'))
})
3
Sergey Bezugliy
var cururl = window.location.pathname;
var curpage = cururl.substr(cururl.lastIndexOf('/') + 1);
var hash = window.location.hash.substr(1);
if((curpage == "" || curpage == "/" || curpage == "admin") && hash=="")
{
//$("nav .navbar-nav > li:first-child").addClass("active");
}
else
{
$(".topmenu li").each(function()
{
    $(this).removeClass("active");
});
if(hash != "")
$(".topmenu li a[href*='"+hash+"']").parents("li").addClass("active");
else
$(".topmenu li a[href*='"+curpage+"']").parents("li").addClass("active");
}
1
user6274097
$(function() {
    var CurrentUrl= document.URL;
    var CurrentUrlEnd = CurrentUrl.split('/').filter(Boolean).pop();

    $( ".top-menu li a" ).each(function() {
          var ThisUrl = $(this).attr('href');
            var ThisUrlEnd = ThisUrl.split('/').filter(Boolean).pop();
            if(ThisUrlEnd == CurrentUrlEnd)
            $(this).addClass('active')
        });
    });
1
A.moizRiaz

Rob.M a bien compris.

Je vais juste poster ma solution car la sienne ne fonctionnait pas vraiment pour moi. J'ai un petit changement par rapport à lui. en supposant que vous avez des chemins différents pour chaque lien.

(function() {
    var current = location.pathname;
    $('#navbar ul li a').each(function() {
        var $this = $(this); 

        // we check comparison between current page and attribute redirection.
        if ($this.attr('href') === current) {
            $this.addClass('active');
        }
    });
})();
1
Haim
$(function(){

//this returns the whole url

  var current = window.location.href;

  //this identifies the list you are targeting

  $('#nav li a').each(function(){
    var $this = $(this);

    // if the current path is exactly like this link, make it active

    if($this.attr('href') === current){

    //this takes care of ul inside a ul, it opens and make active the selected li
        $this.parents('.dropdown-menu').toggle();
        $this.css('color', 'red');
    }
  })
});
0
Ossim Julius

Cela a parfaitement fonctionné pour moi.

$(function($) {
 let url = window.location.href;
  $('nav ul li a').each(function() {
   if (this.href === url) {
   $(this).addClass('active');
  }
 });
});
0
David Jones