不确定我是把悬停还是if搞砸了

Not sure if i am messing up the hover or the IF Then

本文关键字：if 悬停 不确定      更新时间：2023-09-26

好吧，在我看来，这应该是可行的，但我对javascript很陌生，一次尝试了很多东西。这是一个导航栏，当点击或悬停时，它可以显示和隐藏div，同时更改导航的颜色。好吧，它没有完成最后一部分。活动ID是当前显示的ID。对不起，我现在不简单了。

$(function () {
    var active;
    $('.selection').hide();
    $('#homeDiv').show();
    $('.navlink').hover(
    function () {
        $(this).css("color", "#806ac7");
    },
    function () {
        if ($(this == active)) {
            $(this).css("color", "#961014");
        } else {
            $(this).css("color", "#000000");
        }
    });
    $('.navLink').click(function (e) {
        active == $(this);
        $('.navLink').css("color", "#000000");
        $(this).css("color", "#961014");
        $('.selection').hide();
        $('#' + this.id + 'Div').show();
    });
});

除了我在问题下的评论中注意到的内容外，您还需要存储元素，而不是jQuery对象，并比较元素。

如果您尝试比较对$(this)的不同调用的结果，它将始终是false，因为它们是唯一的对象。

$(function () {
    var active;
    $('.selection').hide();
    $('#homeDiv').show();
    $('.navlink').hover(
    function () {
        $(this).css("color", "#806ac7");
    },
    function () {
           // RIGHT HERE, compare the element
        if (this === active) {
            $(this).css("color", "#961014");
        } else {
            $(this).css("color", "#000000");
        }
    });
    $('.navLink').click(function (e) {
        // RIGHT HERE, store the element
        active = this;
        $('.navLink').css("color", "#000000");
        $(this).css("color", "#961014");
        $('.selection').hide();
         // Lowercase "D" in "div", and improved DOM selection
        $(this).find('div').show();
    });
});

似乎您将右括号放错了这一行：if ($(this == active))。实际上应该是if (this == active)

此外，您正在编写一个布尔值，而不是设置一个变量：active == $(this)，它应该是active = this;

$(function () {
    var active;
    $('.selection').hide();
    $('#homeDiv').show();
    $('.navLink').hover(
    function () {
        $(this).css("color", "#806ac7");
    },
    function () {
        if (active == this || active == undefined) {
            $(this).css("color", "#961014");
        } else {
            $(this).css("color", "#000000");
        }
    });
    $('.navLink').click(function (e) {
        active = this;
        $('.navLink').css("color", "#000000");
        $(this).css("color", "#961014");
        $('.selection').hide();
        $('#' + this.id + 'Div').show();
    });
});

http://jsfiddle.net/n3heA/

我认为最好的方法是在用户点击导航项目时添加一个类。在悬停处理程序中，检查类并相应地更改颜色。或者你可以简单地在css中使用important来设置活动颜色，这样你就不需要在悬停中检查活动

$('.navLink').click(function (e) {
    var $this = $(this);
    $this.addClass('open').css("color", "#961014");
    $('.navLink').css("color", "#000000");
    $('.selection').hide();
    $('#' + this.id + 'Div').show();
});
$('.navlink').hover(
function () {
    $(this).css("color", "#806ac7");
},
function () {
    var $this = $(this);
    if ($this.hasClass('open') {
        $this.css("color", "#961014");
    } else {
        $this.css("color", "#000000");
    }
});

上面的解决方案是使用jquery来更改css颜色，但您可以在css中轻松完成。假设您的代码的其余部分正常工作

相关文章：