根据页面应用课程

Question

当用户在相应的页面上时，我需要将类“.selected”应用于导航项目，以便当用户单击“产品”时，它会转到产品页面但产品导航项仍保持选中状态。我怎样才能使用jQuery来完成这个任务？我想我需要获取页面的URL，将样式应用于相应的导航项目，是否正确？

Answer 1

假设你想要的元素风格.selected具有相同目前在浏览器的HTML文件的ID：

$(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'); 
    });