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

これにより、ボタンをクリックするとロールオーバー状態のままにすることができましたが、ページや別のボタンをクリックすると、その状態から解放する方法が見つかりませんでした。.unwrap() 関数を試しましたが、うまくいきませんでした

4

1 に答える 1

0

だから、私は自分のプロジェクトでこの問題を解決しました。基本的に、ロールオーバー効果 (この場合は .current) を作成する 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-21T21:37:08.753 に答える