JQuery navigation active page

Je construis une navigation jQuery et je n'arrive pas à comprendre comment faire en sorte que la navigation reste dans l'état de survol sur la page active.JQuery navigation active page

HTML ...

<body> 
<form id="form1" runat="server"> 
<div> 
    <div id="pageWrap"> 
     <div id="pageBody"> 
      <a class="hoverBtn" href="#"></a> 
      <a class="hoverBtn1" href="#"></a> 
      <a class="hoverBtn2" href="#"></a> 
      <a class="hoverBtn3" href="#"></a>   
      <a class="hoverBtn4" href="#"></a> 
      <a class="hoverBtn5" href="#"></a> 
      <a class="hoverBtn6" href="#"></a> 
      <div class="clear"> 
      </div> 
     </div> 
    </div> 
</div> 
</form>

JQ ...

$(function(){ 
$("a.hoverBtn").show("fast", function() { 
    $(this).wrap("<div class=\"hoverBtn\">"); 
    $(this).attr("class", ""); 
}); 
//display the hover div 
$("div.hoverBtn").show("fast", function() { 
    //append the background div 
    $(this).append("<div></div>"); 

    //get link's size 
    var wid = $(this).children("a").width(); 
    var hei = $(this).children("a").height(); 

    //set div's size 
    $(this).width(wid); 
    $(this).height(hei); 
    $(this).children("div").width(wid); 
    $(this).children("div").height(hei); 

    //on link hover 
    $(this).children("a").hover(function(){ 
     //store initial link colour 
     if ($(this).attr("rel") == "") { 
      $(this).attr("rel", $(this).css("color")); 
     } 
     //fade in the background 
     $(this).parent().children("div") 
      .stop() 
      .css({"display": "none", "opacity": "1"}) 
      .fadeIn("fast"); 
     //fade the colour 
     $(this) .stop() 
      .css({"color": $(this).attr("rel")}) 
      .animate({"color": hoverColour}, 350); 
    },function(){ 
     //fade out the background 
     $(this).parent().children("div") 
      .stop() 
      .fadeOut("slow"); 
     //fade the colour 
     //$(this) .stop() 
      //.animate({"color": $(this).attr("rel")}, 250); 
    }); 
}); 
});

... css

div.hoverBtn1 { 
position:  relative; 
/*float:   left;*/ 
background:  black url(nav_imgs/pbtn2a.png) repeat-x 0 0 scroll; 

} 
div.hoverBtn1 a { 
position:  relative; 
z-index:  2; 
display:  block; 
width:   223px; 
height:   39px; 
line-height: 30px; 
text-align:  center; 
font-size:  1.1em; 
text-decoration:none; 
color:   #000; 
background:  transparent none repeat-x 0 0 scroll; 
} 
div.hoverBtn1 div 
{ 
display:  none; 
position:  absolute; 
z-index:  1; 
top:   0px; 
background:  white url(nav_imgs/pbtn2b.png) repeat-x 0 0 scroll; 
}

J'ai essayé

$("#nav a").each(function() { 
    var hreflink = $(this).attr("href"); 
    if (hreflink.toLowerCase()==location.href.toLowerCase()) { 
    $(this).parent("li").addClass("selected"); 
    } 
});

sans chance le fermé je suis venu était avec ..

$(function() { 
    $("a.hoverBtn").click(function(){ 
    $("a.hoverBtn").wrap("<div class=\"active\">"); 
    }); 
});

Ceci a permis de quitter le BTN le l'état de roulement, une fois cliqué, mais je ne pouvais pas trouver un moyen de le libérer de cet état une fois que la page et/ou un autre btn a été cliqué. j'ai essayé la fonction de .unwrap() mais cela n'a pas fonctionné l'éther

Source

2010-07-21 djshortbus

Ainsi, j'ai juste résolu ce problème sur mon propre projet. Fondamentalement, j'ai une classe CSS spécifiée qui crée l'effet de survol (.current dans ce cas). Je sélectionne ensuite tous les éléments dans mon menu, supprime celui avec la classe en cours, puis fais correspondre l'attribut href à l'adresse du document. J'ai ensuite mis la classe sur le match restes. Vous devrez peut-être faire un peu de filtrage si vous obtenez plus d'un match ... mais cela devrait être le cas.

La clé ici est d'utiliser CSS pour créer l'effet hover (je vois que vous faites un travail supplémentaire dans votre JS) et de vous assurer que vos balises href sont correctement définies.

<script type="text/javascript"> 
    $(function() { 
     // I build my menus out of lists and style them using CSS as well. 
     var menus = $('#navmenu ul li a'); 
     menus.removeClass('current'); 

     var matches = menus.filter(function() { 
      return document.location.href.indexOf($(this).attr('href')) >= 0; 
     }); 

     matches.addClass('current'); 
    }); 
</script>

Source

2010-07-21 21:37:08 JasCav

Répondre

Questions connexes