web-dev-qa-db-ja.com

URLに基​​づいてアクティブナビゲーションクラスを追加する

activeクラスを追加しようとしています（つまり、class="active"）ページが読み込まれると、そのページに基づいて適切なメニューリスト項目に追加されます。以下は現在のメニューです。この点で見つけることができるコードのスニペットをすべて試しましたが、何も機能しません。だから、誰かがこのタスクを定義するためにjavascriptを追加する場所と方法を簡単に説明できますか？

<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>

これが、サイトマスターでheadタグに挿入するjavascriptの例です。私は何を間違えていますか？

$(document).ready(function () {
    $(function () {
        $('li a').click(function (e) {
            e.preventDefault();
            $('a').removeClass('active');
            $(this).addClass('active');
        });
    });
});
javascriptcssmenu
18
slybitz

これが機能しない理由は、javascriptが実行されているため、ページがリロードされ、「アクティブ」クラスが無効になるためです。あなたがおそらくやりたいことは次のようなものです：

$(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');
        }
    })
})

これが機能しない場合もあります（複数の同様に尖ったリンク）が、これはあなたのために機能すると思います。

45
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>
13
Figar Ali

ES6バージョン。リンクが「/ products」であり、「/ products/new」、「/ products/edit」などのサブルートがある場合に適切に機能します。

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($) {
 let url = window.location.href;
  $('nav ul li a').each(function() {
   if (this.href === url) {
   $(this).addClass('active');
  }
 });
});
1
David Jones
$(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はそれを正しく理解しました。

彼は私のために本当に働いていなかったので、私はちょうど私のソリューションを投稿するつもりです。私は彼と比較して小さな変化があります。各リンクへのパスが異なると仮定します。

(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

メニューでactiveにliクラスを追加する必要がある場合は、上記のコードを使用する必要があります。

$(function($) {
  let url = window.location.href;
  $('nav ul li a').each(function() {
    if (this.href === url) {
      $(this).closest('li').addClass('active');
    }
  });
});
1
Vitor de Sousa

この質問が聞かれたのはかなり前のことです。 jQueryがなくても機能する答えを次に示します。

var activeNavlink = document.querySelectorAll('nav a[href^="/' + location.pathname.split("/")[1] + '"]');
activeNavlink[0].classList.add('active');

お役に立てれば。

0
Abhay Shiro
$(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

これはあなたの仕事をするはずです：document.querySelector（a[href^='${location.pathname.split('/'[1])}']）。className = 'active'

0
user9342337

上記の解決策はどれも私にとってはうまくいきませんでした。最後に、このjavascriptソリューションが機能しました。

<script>
function setActive() {
  linkObj = document.getElementById('premier-topnav').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    if(document.location.href.indexOf(linkObj[i].href)>=0) {
      linkObj[i].classList.add("active");
    }
  }
}

window.onload = setActive;
</script>

premier-topnavはnavbar divのIDです。
。activeクラスは次のように定義されます：

#premier-topnav .active {
    color: brown;   
}
0
Networker

このページのJSコードは100％の作業でIDを入力してお楽しみいただけます。

   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   <script>
   $(document).ready(function() {

            var CurrentUrl= document.URL;
            var CurrentUrlEnd = CurrentUrl.split('/').filter(Boolean).pop();
            console.log(CurrentUrlEnd);
            $( "#lu-ID li a" ).each(function() {
                  var ThisUrl = $(this).attr('href');
                  var ThisUrlEnd = ThisUrl.split('/').filter(Boolean).pop();

                  if(ThisUrlEnd == CurrentUrlEnd){
                  $(this).closest('li').addClass('active')
                  }
            });

   });
0
Abdel