添加基于URL的活动导航类

Question

我正在尝试根据页面加载后的页面，将“活动”类（即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>

以下是我在网站母版中添加头条标记的javascript示例。我做错了什么？

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

Answer 1

这不起作用的原因是因为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');
        }
    })
})

在某些情况下，这不起作用（多个类似的尖头链接），但我认为这可能适合你。

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

.active, a.active {
    color: red;
}
a {
    color: #337ab7;
    text-decoration: none;
}
li{
    list-style:none;
}

＆＃13;

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

＆＃13;

＆＃13;

Answer 3

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'))
})

Answer 4

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");
}

Answer 5

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

Answer 6

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

Answer 7

这对我来说很好。

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

Answer 8

以上解决方案均不适用于我。终于，这个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是导航栏div的ID。
.active类定义为：

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

Answer 9

这是为我完成的工作... 把这个放在 body 标签的结尾

 $(function () {
        var current = location.pathname;
        console.log(current);
        if (current == "/") {
            $('#home').addClass('active'); //#home is the id for root link.
        }
        else {

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

Answer 10

如果在使用 Networker 的示例时选择了任何页面，我遇到了一个问题，即指向根的链接会亮起。这将防止 root pae：

function setActive() {
  linkObj = document.getElementById('menu').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    const url = new URL(window.location.href);
    if((document.location.href.indexOf(linkObj[i].href)>=0 && linkObj[i].href != url.protocol+"//"+url.hostname+"/") || document.location.href == linkObj[i].href) {
      linkObj[i].classList.add("active");
    }
  }
}
window.onload = setActive;

Answer 11

看到了一些纯Javascript https://www.youtube.com/watch?v=BI3kNsTruWo&ab_channel=OnlineTutorials 将其放在我的Wordpress网站标题后面的<script>标签中

(function () {
  const currentLocation = location.href;
  console.log(currentLocation);
  const menuItem = document.getElementsByClassName('nav-item');
  const menuLength = menuItem.length
    for ( i = 0; i < menuLength; i++){
    if(menuItem[i].href === currentLocation){
      menuItem[i].className += " active"
    }
}

})();

        <a class="nav-item" href="/ideja/">Ideja</a>
        <a class="nav-item" href="/piesaki-sapni/">Piesaki Sapni</a>
        <a class="nav-item" href="/uznemejiem/">Uzņēmējiem</a>
        <a class="nav-item" href="/sapnu-banka/">Sapņu banka</a>
        <a class="nav-item" href="/sapnus-atbalsta/">Sapņus atbalsta</a>
        <a class="nav-item" href="/99-iedvesmas-stasti/">99 iedvesmas stāsti</a>
        <a id="lv" class="active" href="#">LV</a>
        <a href="javascript:void(0);" class="icon" onclick="openNavbar()">
            <div id="hamburger" class="hamburger "></div>
        </a>

Answer 12

可访问的版本：

这是受rob启发的可访问版本。

1. 我不想在主页上运行此脚本，所以我检查它是否是主页
2. 我检查链接是否与确切页面匹配，而不是检查路径中是否包含该链接。否则，您将在查询中获得多个项目。

JS

function activateCurrentPage(menuItems){
    var current = location.pathname;
    if (current !== "/") {
    menuItems.each(function(){
        var $this = $(this);
        if($this.attr('href') === current){
            $this.addClass('active');
            $this.attr('aria-current', 'page');
        }
    });
    };  
}

activateCurrentPage( $('#nav li a') );  

CSS

然后，CSS的目标不是活动类，而是aria属性。

#nav a[aria-current="page"]{
   color:red;
}

Answer 13

如果要在asp .net中获取母版页，只需将此代码放在body标签内

 <script type="text/javascript">
    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');
            }
        });
    });
</script>

谢谢

Answer 14

如果页面也具有任何查询字符串参数，则下面的jquery脚本将与手册匹配。该脚本对于名称几乎相同的链接很有帮助。

<script>
        //select current menu Item
        $(function () {
            var current = location.pathname.toLocaleLowerCase();
            $('.sidebar li a').each(function () {
                var $this = $(this);
                var href = $this.attr('href');
                href = href.replace(/\?.*/, "").toLocaleLowerCase();
                // if the current path is equal to this link, make it active
                if (href === current) {
                    $this.addClass('active');
                }
            })
        })
    </script>

Answer 15

使用VANILLA纯JavaScript

(function () {
    var current = location.pathname.split('/')[1];
    if (current === "") return;
    var menuItems = document.querySelectorAll('.menu-item a');
    for (var i = 0, len = menuItems.length; i < len; i++) {
        if (menuItems[i].getAttribute("href").indexOf(current) !== -1) {
            menuItems[i].className = "is-active";
        }
    }
})();

Answer 16

我知道问这个问题已经有一段时间了。这是在没有jQuery的情况下可以使用的答案：

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

希望这会有所帮助。

Answer 17

这应该可以完成您的工作： document.querySelector（a[href^='${location.pathname.split('/'[1])}']）。className ='active'

Answer 18

此页面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')
                  }
            });

   });

Answer 19

如果您的菜单需要在active中添加li类，则需要在上面使用此代码。

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

Answer 20

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