javascript - 页眉/页脚导航更新 jquery

Question

我使用 jQuery 创建了具有不同状态的页眉和页脚导航。单击页脚导航时，我在更新页眉导航时遇到问题。例如，当用户单击页脚导航中的列表 1 时，我希望页眉导航也更新为相同的选择。我包含了一个 jsfiddle 示例来说明我在做什么。

更新:页眉导航有主列表项，页脚导航有主列表项和子导航。我想实现相同的功能，但是当单击第一个标记为 footerTitle 的列表项时，它也会更新为标题导航。我更新了 jsfiddle

http://jsfiddle.net/WkZuv/40/

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