根据页面应用一个类

Question

当用户在相应的页面上时，我需要将一个“。选择”类应用于导航项，这样当用户点击“产品”时，它会转到产品页面，但产品导航项仍然被选中。我怎样才能使用jQuery实现这一目标？我想我需要获取页面的URL并将样式应用到相应的导航项，对吗？

Answer 1

假设您想要样式化的元素.selected的ID与浏览器中当前的html文件相同：

$(document).ready(function() {
  ...
  var page = window.location.href.match(/\/(\w+).htm/)[1];
  $('#' + page).addClass('selected');
  ...

Answer 2

我认为你会做某种类型的AJAX系统，你不会在每次点击时重新加载菜单，否则这绝对应该在服务器端完成。如果没有，您可以使用以下

<强> HTML

<ul id='main'>
    <li>menu</li>
    <li>menu</li>
    <li>menu</li>
</ul>​​​

<强>使用Javascript：

$('ul#main > li').click(function() {
        $('ul#main > li.selected').removeClass('selected');
        this.setAttribute('class','selected');
}​​​​​​​​​);​

以下是试用版的链接：http://jsfiddle.net/6zpJX/

Answer 3

以下是一个简单示例，如果您希望匹配整个网址（“http://example.com/mydir/mypage.html”）：

  $(function() {
    var url = window.location;
    $('a[href="' + url + '"]').addClass('selected');
  });

或者，要匹配路径（'/mydir/mypage.html'）：

  $(function() {
    var url = window.location.path;
    $('a[href="' + url + '"]').addClass('selected');
  });