Javascript获取当前页面并根据URL向元素添加类

我使用的是一个导航栏，当元素在元素的页面上时，我希望在元素上有一个活动类

例如，我需要jQuery来检查当前页面的url，如果url是

http://supjamess.tumblr.com/

，它会将类

active

添加到

a

元素

索引中，
http://supjamess.tumblr.com/ask
&它会将类
active
添加到
a
元素
。ask
，依此类推

如果有人能提供代码，那将非常有用。
我的示例需要jQuery：

if ( window.location.pathname == '/' ) {
    var url_class = 'index';
} else {
    // Very first part of the path, so /path/to/url returns 'path'
    var url_class = window.location.pathname.split('/');
    url_class = url_class[1];
}

$('a.' + url_class).addClass('active');

这基本上就是获取URL的路径名组件（在域之后和查询字符串之前），然后检查它是否为“/”，即索引，并手动将URL类设置为“索引”

否则，它将获取URL的第一个组件，因此
/ask
返回
ask
，
/questions/bar
返回
问题
，
/users/edit/5
返回
用户
，
/taged/layouts
返回
标记的
，等等

然后jQuery将类
active
添加到具有给定类的任何元素。
我的示例要求jQuery：

if ( window.location.pathname == '/' ) {
    var url_class = 'index';
} else {
    // Very first part of the path, so /path/to/url returns 'path'
    var url_class = window.location.pathname.split('/');
    url_class = url_class[1];
}

$('a.' + url_class).addClass('active');

这基本上就是获取URL的路径名组件（在域之后和查询字符串之前），然后检查它是否为“/”，即索引，并手动将URL类设置为“索引”

否则，它将获取URL的第一个组件，因此
/ask
返回
ask
，
/questions/bar
返回
问题
，
/users/edit/5
返回
用户
，
/taged/layouts
返回
标记的
，等等

然后jQuery将类
active
添加到具有给定类的任何元素。
基于location.pathname的关闭开关

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "ask") {
      $("a.ask").addClass("active");
 }
 ... and so on

附加页面添加了附加的else if语句，因此代码变为：

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "/ask") {
      $("a.ask").addClass("active");
 } else if (location.pathname == "/tagged/layout") {
      $("a.layout").addClass("active");
 } else if (location.pathname == "/YOUR PATH") { // to add aditional pages, replace CAPS
      $("a.CLASS OF NAV LINK").addClass("active");
 }

您可以在jsfiddle.net上试用javascript，也可以在自己的控制台（在大多数浏览器中为f12）上试用javascript

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "ask") {
      $("a.ask").addClass("active");
 }
 ... and so on

附加页面添加了附加的else if语句，因此代码变为：

 if (location.pathname == "/") {
      $("a.index").addClass("active");
 } else if (location.pathname == "/ask") {
      $("a.ask").addClass("active");
 } else if (location.pathname == "/tagged/layout") {
      $("a.layout").addClass("active");
 } else if (location.pathname == "/YOUR PATH") { // to add aditional pages, replace CAPS
      $("a.CLASS OF NAV LINK").addClass("active");
 }

您可以在jsfiddle.net或您自己的控制台（在大多数浏览器中为f12）上试用javascript。
您不能在javascript中使用“class”作为变量名，它在大多数情况下都会出错browsers@IvanCastellanos是的，在你发表评论之前已经修复：）@IvanCastellanos谢谢，修复：）我不明白这是怎么回事，请您解释一下，它将如何与/ask、/taged/layouts等一起使用@RogueCoder@JamesCharless查看我的帖子，我已经更新了更多详细信息。在Javascript中，不能使用“class”作为变量名，它在大多数情况下都会出错browsers@IvanCastellanos是的，在你发表评论之前已经修复：）@IvanCastellanos谢谢，修复：）我不明白这是怎么回事，你能解释一下吗&它将如何与/问，/标记/布局等@RogueCoder@JamesCharless查看我的帖子，我已经更新了更多详细信息。这与我在主干应用程序中路由URL的方式类似。好处是，如果我需要一个目录有相同的内容，我可以使用search（），比如：if（location.pathname.search（/^\/admin/==0））{admin section}@Austin你能帮我完成这段代码吗？我是javascript新手，不太懂是a.index，/ask是a.contact，/taged/themes是a.layouts，仅此而已。非常感谢你！！有关详细信息，请参见修订后的答案clarification@Austin成功了！非常感谢事实上，这类似于我在主干应用程序中路由URL的方式。好处是，如果我需要一个目录有相同的内容，我可以使用search（），比如：if（location.pathname.search（/^\/admin/==0））{admin section}@Austin你能帮我完成这段代码吗？我是javascript新手，不太懂是a.index，/ask是a.contact，/taged/themes是a.layouts，仅此而已。非常感谢你！！有关详细信息，请参见修订后的答案clarification@Austin成功了！非常感谢D*选择了，他的决定不是我的错，谢谢负2。不成熟…我只是根据我解决问题的方式提出了我的解决方案。我还解释了为什么我在回答的评论中选择使用这种方法。你有权发表你的意见，但这并不意味着我错了，我也不值得投反对票。*选择了，他的决定不是我的错，谢谢你的-2。不成熟…我只是根据我解决问题的方式提出了我的解决方案。我还解释了为什么我在回答的评论中选择使用这种方法。你有权发表你的意见，但这并不意味着我错了，我也不值得投反对票。