JQuery навигационная активная страница - PullRequest
Новая
       11

JQuery навигационная активная страница

0 голосов
/ 22 июля 2010

Я создаю навигацию 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 состояние прокрутки после нажатия, но я не смог найти способ вывести его из этого состояния, когда страница и \или другой btn был нажат.я попробовал функцию .unwrap (), но это не сработало * ether

1 Ответ

0 голосов
/ 22 июля 2010

Итак, я просто решил эту проблему в своем собственном проекте.По сути, у меня указан класс 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>
...