jquery - 在活动菜单链接上添加类

Question

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

我会使用 jQuery

谢谢

Answer 1

What you can do is

1. Get the location of the url
2. use the .indexOf('.html') (Or your extension)
3. Then use the .substr(url.lastIndexOf('/')) (this will give you the page name)
4. Then use it with the class selector or id selector
5. and fire the active class to that link on page load

How this will go see below:

lets suppose this is your url : 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

 });

you can try this demo: http://jsfiddle.net/K9YAz/

Answer 2

$( 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 3

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