javascript - 如何使用 jquery 根据 url 中的关键字更改 css 类

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>

我希望如果 url 是 www.abc.com/user/profile然后配置文件选项卡类应该选择附加的类

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

如果我们可以进行部分匹配，那会很好，但我不确定这是否可能

就像我拥有并被选中的/user/book网址myBook一样

Answer 1

Some elegant variant:

<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，则它存在。

• We also use jQuery.eq( index ) this treats elements selected by a jQuery selector as an array and returns the element of the specified index.

References

Check out jQuery's .eq here, and JavaScript's String.search here

Answer 3

You can grab the part you want with regex:

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

That will give you the part after user/. Then you could use a switch statement:

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