0

好吧，在我看来，这应该可以工作，但我是 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();
    });
});
4

4 回答 4

1

除了我在问题下的评论中指出的内容之外，您还需要存储元素，而不是 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();
    });
});
于 2013-06-27T15:00:39.907 回答
0 
$(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/

于 2013-06-27T15:28:00.407 回答
0

似乎您在此行中放错了右括号：if ($(this == active)). 它实际上应该是if (this == active)

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

于 2013-06-27T15:00:32.810 回答
0

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

$('.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 中轻松完成。假设您的其余代码有效

于 2013-06-27T15:01:11.857 回答