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導航活動頁面

回答

相關問題