JQuery导航活动页面

我正在构建一个jQuery导航，我似乎无法弄清楚如何使导航停留在活动页面上的翻转状态。JQuery导航活动页面

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

三网融合

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

我已经试过

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

没有运气封闭我今天来是跟..

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

这使人们有可能离开BTN一次点击的翻滚状态，但我不能找到一种方法，从释放该状态一旦页面和/或另一个btn被点击。我试过.unwrap（）函数，但没有工作乙醚

来源

2010-07-21 djshortbus

所以，我刚刚解决了这个问题在我自己的项目。基本上我有一个指定的CSS类创建翻转效果（在这种情况下是.current）。然后选择菜单中的所有项目，删除当前类别，然后将href属性与文档地址相匹配。然后，我在剩下的比赛中设置课程。如果你得到不止一场比赛，你可能需要做一些过滤......但应该是这样。

这里的关键是使用CSS来创建悬停效果（我看你在做JS中的额外工作），并确保你的href标签被正确定义。

<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>

来源

2010-07-21 21:37:08 JasCav

JQuery导航活动页面

回答

相关问题