Обновление верхнего колонтитула/нижнего колонтитула jQuery

Question

Я создал навигацию верхнего и нижнего колонтитула с различными состояниями, используя jQuery. У меня проблема с обновлением заголовка nav при нажатии на нижний колонтитул. Например, когда пользователь нажимает список 1 в нижнем колонтитуле, мне нравится, чтобы заголовочная навигация также обновлялась до того же выбора. Я включил пример jsfiddle того, что я делаю.

Обновление: На верхнем навигаторе есть основные элементы списка, а нижний колонтитул содержит основные элементы списка вместе с суб-навигаторами. Я хочу достичь той же функциональности, но вместо этого, когда щелкнут первый элемент списка с надписью footerTitle, он также обновится в заголовке nav. Я обновил 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"); 
    } });