如何更改基于在URL关键字的CSS类与jQuery

Question

我的导航栏，如下

<ul> 
    <li class="selected"><a href=">My Profile</a></li> 
    <li><a href="">xxxx</a></li> 
    <li><a href="">mybook</a></li> 
    <li><a href="">Photos <span>4</span></a></li> 
    <li><a href="">Profile List</a></li> 
</ul> 

我想，如果网址为www.abc.com/user/profile然后配置文件选项卡类应该类别中选择连接

如果照片然后照片选项卡。

如果我们能有部分匹配，这将是不错，但我不知道如果多数民众赞成可能

像网址我有/user/book和myBook被选中

Answer 1

一些优雅的变体：

<ul class="menu"> 
    <li><a class="profile" href="/user/profile">My Profile</a></li> 
    <li><a class="book" href="/user/book">My Book</a></li> 
</ul> 

$(document).ready(function() { 
    var page = document.location.href.split('/').slice(-1)[0]; 
    $('.menu .' + page).addClass('selected'); 
}); 

Answer 2

你想关掉的location.pathname。诚然，你给<ul>一类nav：

$(function() { 
    if (location.pathname.search("/user/profile") != -1) { 
     // page is /user/profile 
     $("#nav li").eq(0).addClass("selected"); 
    } else if (location.pathname.search("/user/photos") != -1) { 
     // page is some/thing 
     $("#nav li").eq(3).addClass("selected"); 
    } 
    ... etc 
}); 

事情需要注意

• 我们使用$(function() {...});，而不是$(document).ready(function() {...});。这是打字更小，更高效的

• 我们使用String.search()，其中在该"/user/profile"出现的字符串返回指数。如果找不到字符串，String.search()将返回-1，因此如果它!= -1，它就存在。

• 我们还使用jQuery.eq(index)，它将jQuery选择器选择的元素作为数组处理，并返回指定索引的元素。

参考

退房jQuery的.eqhere和JavaScript的String.searchhere

Answer 3

你可以抓住的部分要与正则表达式：

var userPage = /user\/(.+)/.exec(location.href)[1]; 

这会给你的部分在user/之后。然后，你可以使用一个switch声明：

switch (userPage) { 
    case 'profile': 
    ... 
    break; 
    case 'book': 
    ... 
    break; 
}