CODEWITHSUNDEEP
javascriptjqueryhtml
l33tn4
l33tn4

Reputation: 43

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

Ok as always in my mind this should work but i am new to javascript and trying a lot of things at once. This is a nav bar that shows and hides divs while change color of the nav when clicked or hover over. well it does not do that last part. The active ID is the one that is currently displayed. Sorry i now it is nothing simple.

$(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();
    });
});

Upvotes: 0

Views: 88

Answers (4)

Huangism
Huangism

Reputation: 16438

I think the best way to do what you want, is to add a class when the user clicks on your nav items. In your hover handler, check for the class and change the colour accordingly. Or you can simply use important in the css to set the active colour, so you don't need to check for active in your hover

$('.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");
    }
});

The solution above is using jquery to change the css colour but you can easily do it in css. Assuming the rest of your code works

Upvotes: 0

Ali Demirci
Ali Demirci

Reputation: 5442

$(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/

Upvotes: 0

user2437417
user2437417

Reputation:

In addition to what I noted in my comment under the question, you need to store the element, not a jQuery object, and that compare the elements.

If you try to compare the result of different calls to $(this), it will always be false, because they're unique objects.

$(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();
    });
});

Upvotes: 1

Kostia
Kostia

Reputation: 6304

Seems like you misplaced your closing bracket in this line: if ($(this == active)). It should actually be if (this == active)

Also, you are writing a boolean instead of setting a variable: active == $(this) which should be active = this;

Upvotes: 0

Related Questions