0

ヘッダーとフッターのナビゲーションを作成しました。ヘッダー ナビゲーションには 1 つの UL が含まれ、フッター ナビゲーションには 5 つの UL が含まれます。フッター ナビゲーション内の各 UL の li:first 子がヘッダー ナビゲーションと一致するようにします。フッター ナビゲーションにはヘッダー ナビゲーションと同じメイン ラインがありますが、その中にサブ ラインが含まれています。

私の問題のjsFiddleを作成しました：

http://jsfiddle.net/WkZuv/41/

$(".Nav > li").live({
    mouseover:function(){
        $(this).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(this).addClass("menuClicked");
    }
});

$(".footer > li:first-child").live({
    mouseover:function(){
        $(this).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(".Nav > li").eq($(this).index()).addClass("menuClicked");     

         $(".footer > li").removeClass("menuClicked");
        $(this).addClass("menuClicked");  
    }
});

.menuHover{
    background-color:#666;
    color:#fff;
}
.menuClicked{
    background-color:yellow;
    color:#666;
}

.footerTitle{
    font-weight: bold;
    color:black;
}

<h1>Header NAV</h1>
<ul class="Nav">
    <li class ="menuClicked"> List 1 </li> 
    <li>List 2 </li>
    <li> List 3 </li>
    <li> List 4 </li>
    <li> List 5</li>
</ul>

<hr />

<h1>FOOTER NAV</h1>
<ul class="footer">
    <li class ="footerTitle"> List 1 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 2 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 3 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 4 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
<ul class="footer">
    <li class ="footerTitle"> List 5 </li> 
    <li>Sub List 2 </li>
    <li>Sub List 3 </li>
    <li> Sub List 4 </li>
    <li>Sub List 5</li>
</ul>
4

2 に答える 2

1

私はあなたが探しているものを理解していると思います。次のようなことを試してください：

$(".Nav > li").live({
    mouseover:function(){
        $(this).addClass("menuHover");
        $(".footer > li:first-child").eq($(this).index()).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
        $(".footer > li:first-child").eq($(this).index()).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(this).addClass("menuClicked");
        $(".footer > li:first-child").removeClass("menuClicked").eq($(this).index()).addClass("menuClicked");
    }
});

$(".footer > li:first-child").live({
    mouseover:function(){
        $(this).addClass("menuHover");
        $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuHover");
    },
    mouseout:function(){
        $(this).removeClass("menuHover");
        $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).removeClass("menuHover");
    },
    click:function(){
        $(".Nav > li").removeClass("menuClicked");
        $(".footer > li:first-child").removeClass("menuClicked");
        $(this).addClass("menuClicked");
        $(".Nav>li").eq($(".footer").index($(this).parent("ul"))).addClass("menuClicked");
    }
});

デモ: http://jsfiddle.net/dirtyd77/WkZuv/65/

于 2013-02-22T17:44:30.627 に答える
0

次の記述には問題があります。

$(".Nav > li").eq($(this).index()).addClass("menuClicked");

$(this).index() は常にゼロを返します。ul.footer 要素のセットに一致するように css セレクターを調整して、正しいインデックスを取得してみてください。ただし、他の変更を加える必要があります。

于 2013-02-22T17:29:41.297 に答える