在活动菜单链接上添加课程

Question

我需要从菜单更改链接的外观（如果它属于当前URL）。 我不知道如何检测当前的URL并更改元素类。

我会用jQuery

谢谢

Answer 1

$( document).ready(function (){
  $( function(){
    var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace( /\/$/,'' ) + "$" );
    $('a').each( function(){
    if(urlRegExp.test(this .href.replace(/\/$/, ''))){
      $( this).addClass('active' );
    }
   });   
  });
});

Answer 2

你能做的是

1. 获取URL的位置
2. 使用.indexOf('.html') （或您的扩展名）
3. 然后使用.substr(url.lastIndexOf('/')) （这将为您提供页面名称）
4. 然后将其与class选择器或id选择器一起使用
5. 并在页面加载时将active类触发到该链接

具体操作如下：

让我们假设这是您的网址： http://localhost/myWebsite/index.html

 $(function(){ // this is done on doc ready function

    var url = window.location;
    var dUrl = url.substr(0, url.indexOf('.html'));
    var link = dUrl.substr(dUrl.lastIndexOf('/')+1);

    $('#'+link).addClass('active'); // on page load this will add the class to the corresponding link

 });

您可以尝试此演示： http : //jsfiddle.net/K9YAz/

Answer 3

您可以使用window.location的属性来获取当前页面的URL或所需的URL部分。 然后，您可以选择菜单的每个锚点，在它们上循环，将其各自的href属性的值与当前页面的URL进行比较。 如果它们相等，则将适当的类添加到元素。