Question

我使用jQuery创建了具有不同状态的页眉和页脚导航。单击页脚导航时，我在更新标题导航时遇到问题。例如，当用户单击页脚导航中的列表1时，我希望标题导航也更新为相同的选择。我包括了一个我正在做的事情的例子。

更新：标题导航具有主列表项，页脚导航具有主列表项以及子导航。我希望实现相同的功能，但是当单击标记为footerTitle的第一个列表项时，它也会更新到标题导航。我更新了jsfiddle

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

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

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


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

<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>

Answer 1

查看http://jsfiddle.net/WkZuv/28/

您还应该考虑缓存jquery对象。

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

$(".footer > li").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");  
    } });

页眉/页脚导航更新jquery

1 个答案: