0

我使用 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>
4

1 回答 1

0

看看这个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");  
    } });
于 2013-02-22T15:52:53.320 回答