Добавление текущего класса в div по ссылке нажмите

Question

Каков наилучший способ добавить текущий класс в .navimg divs (рядом с li) при нажатии на их родительскую ссылку?

HTML:

<div id="navbox">  
    <ul id="navigation"> 
     <li id="home"><a href="#">HOME</a></li>        <div id="imghome" class="navimg current"></div> 
     <li id="corp_gov"><a href="#">CORPORATE <br /> GOVERNANCE</a></li> <div id="imggov" class="navimg"></div> 
     <li id="board"><a href="#">BOARD &amp; <br /> DIRECTORS</a></li>  <div id="imgboard" class="navimg"></div> 
     <li id="permit"><a href="#">PERMIT <br /> DETAILS</a></li>   <div id="imgpermit" class="navimg"></div> 
     <li id="corp_dir"><a href="#">CORPORATE <br /> DIRECTORY</a></li>  <div id="imgdir" class="navimg"></div> 
    <li id="contact"><a href="#">CONTACT</a></li>        <div id="imgcontact" class="navimg"></div> 
</ul> 
</div> 

Я попытался использовать это, что я нашел в другом вопросе о здесь, используя кучу вариаций, но он не работает прямо сейчас:

JQuery

$(document).ready(function() {   
    $("#navbox ul li a").click(function(e) { 
     $(".current").removeClass("current"); 
     $(this).nextAll("div.navimg").first().addClass("current"); 
}); 

Это лучший способ использования или что бы вы предложили? Должен ли я создать новую функцию для каждой ссылки или вы можете использовать эту работу для всех?

Я попытался это, а также попробовать и цель каждой ссылки конкретно, но это не сработало:

$("li#home a").click(function(e) { 
    $(".current").removeClass("current"); 
    $("#imghome").addClass("current"); 

Спасибо всем

EDIT: Я сделал jsFiddle показывая, что происходит: http://jsfiddle.net/Amp3rsand/vGTpW/2/

Answer 1

Я доработан в HTML, чтобы включить imgnav внутри ли.

Проверьте скрипку. http://jsfiddle.net/ScQtx/

JQuery:

var $allNavImgs = $('.navimg'); 
$("a","#navbox").on('click',function(e){ 
    e.preventDefault(); 
    $allNavImgs.removeClass('current'); 
    $(this).siblings().filter('.navimg').addClass('current'); 
}); 

HTML:

<div id="navbox">  
    <ul id="navigation"> 
     <li id="home"> 
      <a href="#">HOME</a> 
      <div id="imghome" class="navimg current"></div> 
     </li>        
     <li id="corp_gov"> 
      <a href="#">CORPORATE <br /> GOVERNANCE</a> 
      <div id="imggov" class="navimg"></div> 
     </li>  
     <li id="board"> 
      <a href="#">BOARD &amp; <br /> DIRECTORS</a> 
      <div id="imgboard" class="navimg"></div> 
     </li>  
     <li id="permit"> 
      <a href="#">PERMIT <br /> DETAILS</a> 
      <div id="imgpermit" class="navimg"></div> 
     </li>    
     <li id="corp_dir"> 
      <a href="#">CORPORATE <br /> DIRECTORY</a> 
      <div id="imgdir" class="navimg"></div> 
     </li>  
    <li id="contact"> 
     <a href="#">CONTACT</a> 
     <div id="imgcontact" class="navimg"></div> 
    </li>        
</ul> 
</div> 

Answer 2

Вы забыли добавить .parent()

jsFiddle

$("#navbox ul li a").click(function (e) { 
    $(".current").removeClass("current"); 
    $(this).parent().next("div.navimg").addClass("current"); 
});