根據頁面應用課程

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