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

我正在使用导航栏，并且我想在元素的页面上有元素的活动类。Javascript获取当前页面并根据URL添加类到一个元素

举例来说，我需要jQuery来检查当前网页的网址，而且如果网址是http://supjamess.tumblr.com/，它会在类active添加到a元素.index，http://supjamess.tumblr.com/ask &它会添加类active到a元素.ask等等。

如果任何人都可以提供代码，它会非常有帮助。

来源

2012-07-06 James Charless Dickinson

*选择，他的决定不是我的错，谢谢你的减号2.不成熟... – Austin 2012-07-06 22:53:27

我简单根据我将解决问题的方式为问题提供了解决方案。我也解释了为什么我选择在我的回答的评论中使用这种方法。你有权获得你的意见，但这并不意味着我错了，我也不应该得到一个倒退。 – Austin 2012-07-06 23:00:14

开关关闭基础的location.pathname

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

其他页面与其他额外添加的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的JavaScript .net，或在你自己的控制台（大多数浏览器的f12）

来源

2012-07-06 01:10:28 Austin

这可能会变得非常长...... – 2012-07-06 01:14:56

的确，这与我用于在Backbone应用程序中路由我的URL的方式类似。好处是，如果我需要对目录有相同的内容，我可以使用search（），如下所示： if（location.pathname.search（/^\/admin/=== 0））{admin部分} – Austin 2012-07-06 01:18:44

@Austin你能为我完成这段代码吗？我是新来的JavaScript，我不太明白。 /是a.index，/ ask是a.contact，/ tagged/themes是a.layouts，就是这样。非常感谢！！ – 2012-07-06 01:34:16

我的示例需要的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的路径组件（域后，查询字符串之前，see here），然后检查，看它是否是“ /'，又名索引，并手动将URL类设置为'index'。

否则，它得到的URL的第一分量，所以/ask返回ask，/questions/bar返回questions，/users/edit/5返回users，/tagged/layouts返回tagged等

然后jQuery的添加类active到任何元件与所述给定类。

来源

2012-07-06 01:08:40

您不能在Javascript中使用“class”作为变量的名称，它会在大多数浏览器中引发错误 – 2012-07-06 01:11:41

@IvanCastellanos是的，在您评论之前修复它:) – 2012-07-06 01:12:12

您忘记了最后一个 – 2012-07-06 01:12:44

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

回答

相关问题