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

3

您忘记添加.parent()

jsFiddle

$("#navbox ul li a").click(function (e) {
   $(".current").removeClass("current");
   $(this).parent().next("div.navimg").addClass("current");
});
于 2013-08-13T03:35:23.773 回答
1

我修改了 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>
于 2013-08-13T03:40:46.263 回答