Question

点击父链接时，将当前类添加到.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/

Answer 1

您忘了添加.parent()

<强> jsFiddle

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

Answer 2

我修改了HTML以在li中包含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>

在链接点击时将当前类添加到div

2 个答案: