0

我正在构建一个 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() 函数，但那不起作用

4

1 回答 1

0

所以，我只是在我自己的项目中解决了这个问题。基本上，我指定了一个 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-21T21:37:08.753 回答