Jquery Ajouter classe active au menu principal

Je suis en train d'ajouter de la dynamique active de la classe de mon menu principal, mais je ne peux pas en mesure d'atteindre cet objectif,

Mon jquery est,

<script type="text/javascript">
$(document).ready(function() {
  $('#navi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
</script>

Mon menu principal est,

<ul id="navi">
  <li><a href="#">About MHG</a></li>
  <li><a href="#">Workout Programs</a></li>
  <li><a href="#">Fitness Tips</a></li>
  <li><a href="#">Contact Us</a></li>          
  <li><a href="#">Read Our Blog</a></li>
</ul>
Comment cela peut-il éventuellement fonctionner lorsque le href attribut de tous les a éléments sont à #?

OriginalL'auteur Vin_fugen | 2013-01-30

  1. 18

    Essayer cette

    <ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>          
    <li><a class="menu" href="#">Read Our Blog</a></li>
  </ul>

    jquery

    $('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

    vérifier ce Violon http://jsfiddle.net/9nd4j/1/

    Cela ne fonctionnera pas sur les pages de recharger complètement, seulement que partiellement recharger et de laisser le menu, tout simplement.

    OriginalL'auteur krizna

  2. 1

    ^^ même que le commentaire ci-dessus par Rory!!

    si vous avez encore besoin vous pouvez faire 

    $("#navi a").live("click", function(){
  $("#navi a").removeClass("active");
  $(this).addClass("active")
});

    Si vous avez tous les liens pointant vers une même page, la solution ci-dessus fonctionne, je vois que vous allez traverser la ligne d'une page à une autre, cela ne marchera pas.

    Grâce

    OriginalL'auteur abhijit

  3. 0

    Votre description n'est pas très clair. Par actif si vous voulez dire que l'élément de liste, vous êtes en vol stationnaire sur, alors il devrait être quelque chose comme ceci:

    $('a.menu').hover(

function () {
    $(this).addClass("active");
},

function () {
    $('a.menu').removeClass("active");
});

    OriginalL'auteur Jehanzeb.Malik