Appliquer une classe basée sur la page

Question

Je dois appliquer une classe ".selected" à un élément de navigation lorsque l'utilisateur est sur la page correspondante, de sorte que lorsque l'utilisateur clique sur "Products", il va à la page des produits mais l'article de navigation Produits reste sélectionné. Comment puis-je accomplir cela en utilisant jQuery? Je suppose que je devrais obtenir l'URL de la page et appliquer le style à l'élément de nav correspondant, correct?

Answer 1

en supposant que l'élément que vous voulez style .selected a un identifiant identique au fichier html actuellement dans le navigateur:

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

Answer 2

Je suppose que vous allez faire une sorte de système AJAX où vous ne serez pas recharger le menu à chaque clic, sinon cela devrait certainement être fait côté serveur. Sinon, vous pouvez utiliser les éléments suivants

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

Voici un lien pour l'essayer: http://jsfiddle.net/6zpJX/

Answer 3

Voici un simple Par exemple, si vous souhaitez faire correspondre l'URL complète ('http://example.com/mydir/mypage.html '):

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

Ou, pour correspondre au chemin (' /mydir/mypage.html '):

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