親リンクがクリックされたときに現在のクラスを .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 & <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/