Question

我正在构建一个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（）函数，但是没有“工作以太”

Answer 1

所以，我刚刚在自己的项目中解决了这个问题。基本上我指定了一个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>

JQuery导航活动页面

1 个答案: