活动状态菜单 JavaScript

active state menu javascript

本文关键字：JavaScript 菜单 活动状态      更新时间：2023-09-26

我在使用 URL 识别为菜单设置活动状态时遇到问题。我希望实现的是，如果您位于链接到的页面上，则<a href="">更改为<a id="active" href ="">。到目前为止，我所做的似乎不起作用。

如果您有任何想法，请告诉我，并感谢您的帮助！

 $(function(){   
  var url = window.location.href;   
  var page = url.substr(url.lastIndexOf('/')+1);   
   $('.ActiveMenu a[href*="'+page+'"]');   
   $(this).attr({ id: 'active'});});

  <ul id="menu">
   <li id="Link1" class="ActiveMenu"><a href="URL1">Link 1</a></li>
   <li id="Link2" class="ActiveMenu"><a href="URL2">Link 2</a></li>
   <li id="Link3" class="ActiveMenu"><a href="URL3">Link 3</a></li>
  </ul>

所以问题是你的函数不知道$（this）是什么。相反，您应该将目标设置为正确的元素，然后向其添加一个类。不应使用 id，因为您应该只有一个 id，并且它应该是唯一标识符，而不是状态。类更适合它。让我知道这是否适合您！:)

演示 

 $(function(){   
  var url = window.location.href;   
  var page = url.substr(url.lastIndexOf('/')+1);   
   target = $('.ActiveMenu a[href*="'+page+'"]');   
   $(target).addClass('active');
});

  <ul id="menu">
   <li id="Link1" class="ActiveMenu"><a href="URL1">Link 1</a></li>
   <li id="Link2" class="ActiveMenu"><a href="URL2">Link 2</a></li>
   <li id="Link3" class="ActiveMenu"><a href="URL3">Link 3</a></li>
  </ul>

请添加/更改类名而不是 Id

$(function(){   
   var url = window.location.href;   
   var page = url.substr(url.lastIndexOf('/')+1);   
   var currentPage=$('.ActiveMenu a[href*="'+page+'"]');   
   currentPage.addClass('active');
});

请使用

$(this).attr("id","active");
相关文章：