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

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

Я попытался

$("#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. Я попробовал функцию .unwrap(), но это не работало эфиром

источник

2010-07-21 djshortbus

Итак, я просто решил эту проблему в своем собственном проекте. В основном у меня есть определенный класс CSS, который создает эффект опрокидывания (в этом случае - текущий ток). Затем я выбираю все элементы в своем меню, удаляю его с текущим классом, а затем сопоставляю атрибут 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 навигация активная страница

ответ

Смежные вопросы