Question

我正在使用一些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");
        }
    });
});

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

欢呼声!!

Answer 2

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

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

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

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

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

Answer 3

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

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

＆＃13;

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

＆＃13;

#contact {
  margin-top: 1000px;
  height:50px;
  width:50px;
}

.active
{
  background-color : red;
  color:#fff;
}

＆＃13;

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

＆＃13;

Answer 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)让浏览器处理点击并更改位置。

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

4 个答案: