Question

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

例如，我需要jQuery来检查当前页面的url，如果url是http://supjamess.tumblr.com/，它会将类active添加到a元素.index，http://supjamess.tumblr.com/ask＆amp;它会将课程active添加到a元素.ask，依此类推。

如果有人能提供代码，那将非常有帮助。

Answer 1

我的例子需要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'。

否则，它会获取网址的第一个组成部分，因此/ask会返回ask，/questions/bar会返回questions，/users/edit/5会返回users ，/tagged/layouts返回tagged等。

然后jQuery将类active添加到具有给定类的任何元素。

Answer 2

根据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.net上或在您自己的控制台（大多数浏览器中为f12）中试用和试用javascript

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

2 个答案: