jquery - Adding current class to div on link click -

what best way add current class .navimg divs (next li) when parent link clicked?

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> 

i have tried use found in question on here using bunch of variations isn't working right now:

jquery

$(document).ready(function() {               $("#navbox ul li a").click(function(e) {         $(".current").removeclass("current");         $(this).nextall("div.navimg").first().addclass("current"); }); 

is best method use or suggest? have make new function each link or can 1 work of them?

i tried try , target each link didn't work either:

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

thanks everyone

edit: made jsfiddle showing going on: http://jsfiddle.net/amp3rsand/vgtpw/2/

i modifed html include imgnav inside li.

check fiddle. 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>