0

親リンクがクリックされたときに現在のクラスを .navimg div (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");

みんな、ありがとう

編集: 何が起こっているかを示す jsFiddle を作成しました: http://jsfiddle.net/Amp3rsand/vGTpW/2/

4

2 に答える 2