突出显示菜单上的活动链接答案

【问题标题】：Highlight active link on menu突出显示菜单上的活动链接
【发布时间】：2016-11-27 06:13:51
【问题描述】：

我正在使用一些 jquery 代码来突出显示我网站上的当前活动页面。它非常适合页面。但是当我将菜单链接到任何 div id 时，它不会突出显示。我怎样才能让它也适用于 id 。这是我的代码：

$(function() {
    // this will get the full URL at the address bar
    var url = window.location.href;

    // passes on every "a" tag 
    $(".menu_holder a").each(function() {
        // checks if its the same on the address bar
        if (url == (this.href)) {
            $(this).closest("li").addClass("active");
        }
    });
});

【问题讨论】：

你能发布一个关于这个问题的小提琴吗？我不明白您所说的“将菜单链接到任何 div id”是什么意思
说我有一个 id 为 #contact 的 div。我有一个名为联系人的菜单，我已将此 div 链接到该联系人菜单。当我单击联系人链接时，它正在滚动到该#contact div，但它没有突出显示为活动部分。
请分享一些 HTML。

标签： javascript jquery menu highlight

【解决方案1】：

我想你使用的菜单是

用你的班级试试这个改变 ul.nav

        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }

干杯！！

【讨论】：

如果页面名称相似（例如“page1.html”和“page2.html”），则使用indexOf 将不起作用
获取菜单中的href
哎呀，没关系...我在想文件夹“example.com/content”和“example.com/content1”。无论如何，他正在使用锚。
出于这个原因，他说当链接到锚点时，菜单链接失去了高亮。这样就不会失去它......

【解决方案2】：

这是因为window.location.href 为您提供了页面的实际绝对 URL，例如http://stackoverflow.com/questions/38541730/highlight-active-link-on-menu#contact。但是，您的链接很可能有一个 relative 的 href——基本上，this.href 可能只是 #contact。

我认为更好的解决方案是使用这样的正则表达式来获取相对 url：

window.location.href.match(/#.*/) //gives you $contact"

编辑：感谢 Mottie，这是一个更好的解决方案：

window.location.hash //gives you "#contact"

【讨论】：

为什么不用.hash 而不是.href？

【解决方案3】：

根据 cmets，我假设您正在尝试突出显示 div 以及单击的菜单。

您可以使用以下代码。它将滚动 div 并突出显示目标 div 以及单击的链接菜单。

$(function() {
// this will get the full URL at the address bar
var url = window.location.href;

$(".menu_holder a").on('click',function(event) {
 
        event.preventDefault();
        var selectedDiv = $(this).attr('href');
  
          $('html, body').animate({
              scrollTop: $(selectedDiv).offset().top - 20
          }, 'slow');
        
        $(selectedDiv).addClass("active");
        $(this).addClass("active");

  });
});

#contact {
  margin-top: 1000px;
  height:50px;
  width:50px;
}

.active
{
  background-color : red;
  color:#fff;
}

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="script.js"></script>
  </head>

  <body>
   <div class="menu_holder">
    
     <a href="#">Home</a>
     <a href="#contact">contact</a>
   </div>
   <div id="contact">
     contact section
   </div>
  </body>

【讨论】：

【解决方案4】：

假设你有这个 html：

<div class="Menu">
  <a href="#Div1">Div 1</a>
  <a href="#Div2">Div 2</a>
</div>

<div id="Div1">
  content 1
</div>

<div id="Div2">
  content 2
</div>

如果您想在点击后突出显示锚点，您可以使用此代码合并您的代码并添加您要查找的内容：

var url = window.location.href;

$(".Menu a").each(function(e) {
  if (url == (this.href)) {
    $(this).addClass("Active");
  }
}).on("click", function(e) {
    var a = this;
    setTimeout(function() {
      if (window.location.href == a.href) 
        $(a).addClass("Active");
    }, 0);
});

我使用setTimeout (..., 0) 让浏览器处理点击并更改位置。

【讨论】：