Question

我在this page上使用了一个脚本，可以完成我想要的所有操作，即在悬停时更改导航栏中树叶的颜色，使用哈希方法在页面之间淡入淡出，以及滑动联系人形成。唯一不起作用的是在非活动导航链接中淡出.current div（即当用户点击叶子来更改页面时，我希望页面上的绿叶已经离开淡出）。

我希望添加此代码可以处理除活动链接之外的链接的淡出，但是当我将其添加到委托单击函数时，所有叶子都保持棕色，即看起来不是（this）是没有工作，并且所有nav .current div都褪色为不透明度：0：

$(".current").not(this).stop().animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

        });

我创建了一个包含相关代码here的jsfiddle。我还包括完整的脚本，以及下面导航栏的html和css，并且很乐意为此工作提供一些帮助。

谢谢，

尼克

SCRIPT

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
        $panel = $("#panel");

    $panel.visible = false;

    $("nav").delegate("a", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass('clicked');
        $("a").not(this).removeClass('clicked');
        $(".current", this).stop().animate({
            opacity: 1
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },

        });

        return false;
    });

    $("#nav-bottom").delegate("a", "click", function ()
    {
        $("#panel").slideDown("slow");
        return false;
    });

    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            if ($panel.visible)
            {
                $pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
                {
                    $pageWrap.height($pageWrap.height());
                    $panel.visible = false;
                });
                $panel.slideUp();
                baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
            }
            else
            {
                $pageWrap.height($pageWrap.height());
                baseHeight = $pageWrap.height() - $mainContent.height();
            }

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto");
                        });

//                        $("nav a").removeClass("current");
//                        $("nav a[href=\"" + newHash + "\"]").addClass("current");
                    });
                });
        };
    });

    $("#contact").click(function ()
    {
        $("#panel").slideDown("slow");
//        $(this).addClass("current");
//        $("#home, #about").removeClass("current");
        $panel.visible = true;
        return false;
    });

    $(".close").click(function ()
    {
        $("#panel").slideUp("slow");
//        $(curTab).addClass("current");
//        $("#contact").removeClass("current");
        $panel.visible = false;
        return false;
    });

    $("nav a").hover(
        function() {
            if(!$(this).hasClass('clicked')){

            $(".current", this).stop().animate({
                opacity: 1
            }, {
                duration: 300,
                specialEasing: {
                    opacity: 'linear',
                },

            });
            }
        }, function() {
        if(!$(this).hasClass('clicked')){
            $(".current", this).stop().animate({
                opacity: 0
            }, {
                duration: 2000,
                specialEasing: {
                    opacity: 'linear',
                },

        });

        }
    });

    $(window).trigger('hashchange');

});

HTML

<nav>

<div id="nav1">
     <a href="index.html" class="fade" id="index">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/home.png"></div>

     </a>
</div>

<div id="nav2">
     <a href="about.html" class="fade" id="about">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png" class="flip"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png" class="flip"></div>
     <div class="text"><img src="images/about.png"></div>

     </a>
</div>

<div id="nav3">

     <a href="index.html" class="" id="contact">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/contact.png"></div>

     </a>
</div>

</nav>

CSS

nav {
    width: 650px;
    height: 170px;
    position: absolute;
    top: 100;
    left: 200;
}

#nav1 {
    position: absolute;
    top: 0;
    left: 120px;
}

#nav2 {
    position: absolute;
    top: 0;
    left: 340px;
}

#nav3 {
    position: absolute;
    top: 0;
    left: 560px;
}


.nav-image  {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

}

.current {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 0;
}

Answer 1

问题是$(".current")正在选择<div>元素。该函数触发附加到<a>元素的事件，因此this指的是<a>元素，因此not永远不会匹配元素。

要让not匹配，您需要选择.current中包含的this元素：

$(".current").not($(".current",this))

Answer 2

所以这里的基本问题是，在点击处理程序中，this引用了已被点击的a元素，即{{1}的父您要定位的元素。尝试：

div.current

脚本不淡出非活动导航链接

2 个答案: