Même page SubNav sur plusieurs pages site Web

Question

Je suis en train de changer le CSS d'une ancre incluse dans un <li> d'un sous-menu. Voici le code HTML:

<ul id="nav"> 
    <li class="subnav current"><a href="page1.html">Page1</a> 
     <ul> 
     <li><a href="page1.html#section1a">Page 1 Section A</a></li> 
     <li><a href="page1.html#section1b">Page 1 Section B</a></li> 
     <li><a href="page1.html#section1c">Page 1 Section C</a></li> 
     </ul> 
    </li> 
    <li class="subnav"><a href="page2.html">Page2</a> 
     <ul> 
     <li><a href="page2.html#section2a">Page 2 Section A</a></li> 
     <li><a href="page2.html#section2b">Page 2 Section B</a></li> 
     <li><a href="page2.html#section2c">Page 2 Section C</a></li> 
    </ul> 
    </li> 
<ul> 

Chaque section a une largeur 1060px, un flotteur gauche, et toutes les sections sont inclus dans un conteneur div qui débordent est caché. est le script Ici j'ai essayé:

$(document).ready(function() { 
    var P=($(".section").position().left)*-1 
    var N=(P/1060)+1 
    $("#nav li.current ul li:first-child").find("a").css("color","#e53f33"); 
    $("#nav li.current ul li:nth-child(N)").click(function(){ 
     $(this).siblings().find("a").css("color","#777777"); 
     $(this).find("a").css("color","#e53f33"); 
    }); 
}); 

Ce script fonctionne très bien quand je reste sur la même page. Mais, c'est-à-dire, lorsque je suis à la page 1 et que je clique sur un lien situé à la page 2, le CSS du premier enfant est changé, même si j'ai cliqué sur un autre enfant. Où est mon erreur?

Vous pouvez voir ce qui se passe ici http://www.theworkingowl.com.

Answer 1

Pour commencer, pourquoi ne pas mettre les événements click sur les ancres? De plus, l'approche nth-child n'est pas ce que vous voulez ici. Avez-vous pensé à appliquer/supprimer des classes à la place?

$(document).ready(function() { 
    // take care of direct hash links... 
    var relative_url = window.location.href.substr(window.location.protocol.length+window.location.hostname.length+3); 
    $('a[href="'+relative_url+'"]').addClass('current').parent().siblings().find('a').css('color', '#777'); 

    // take care of clicks that stay on this page... 
    $('#nav a').click(function() { 
    $(this).parent().addClass('current').siblings().removeClass('current'); 
    }); 
}); 

Et puis votre CSS ...

#nav a { color:#777777; } 
#nav li.current a { color:#e53f33; }