jQuery navigation header

Question

I am having a problem with the last exercise on the jQuery track of Codecademy.

I am trying to recreate the navigation header as close as possible, but I can't find a way to let the selected div stay selected, when it's clicked.

Here is the working jsFiddle.

And here is the original code:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <title></title>
    </head>
    <body>
        <div id="show" contenteditable="true">Enter your text below:</div>
        <div id="back"></div>
        <div class="header">Files</div>
        <div class="header">index.html</div>
        <div class="header">style.css</div>
        <div class="header">script.js</div>
    </body>
</html>

style.css:

#back {
    height: 50px;
    width: 400px;
    position: absolute;
}

#show {
    background-color: rgb( 35, 44, 49 );
    color: #FFFFFF;
    height: 400px;
    width: 400px;
    top: 58px;
    position: absolute;
}

.header {
    font-family: helvetica;
    float: left;
    background-color: #212121;
    color: rgb(105, 105, 105);
    position: relative;
    height: 50px;
    width: 100px;
    text-align: center;
}

script.js:

$(document).ready(function() {
    $("#show").hide();
    $(".header").click(function() {
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 35, 44, 49 )"
        });
        $("#show").show();
    });

    $(".header").mouseenter(function() {
        $(this).css("cursor", "pointer");
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 45, 60, 70 )"
        });
    });

    $(".header").mouseleave(function() {

            $(this).stop().animate( {
                color: "#696969",
                backgroundColor: "rgb( 33, 33, 33)"
            });
    });
});

Help would be appreciated.

Yes, the 'active' class seems to be the key. I'm wondering what kind of other approaches are possible. — Christian Heinrichs
– Christian Heinrichs, Commented Jul 10, 2013 at 20:45

SpYk3HH · Accepted Answer · 2013-07-10 19:42:52Z

2

Very easy solution to what you already have.

Add One line of CSS

.active { background-color: rgb( 35, 44, 49 ) !important; color: white !important; }

Then add one line and one method on ur script

$(".header").click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active').stop().animate( {

edited Jul 10, 2013 at 19:42

answered Jul 10, 2013 at 18:24

SpYk3HH

22.6k11 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Heinrichs Over a year ago

This solution works like a charm. Thank you very much. I can't vote up your answer because of my reputation, though.

DevlshOne · Accepted Answer · 2013-07-10 18:23:42Z

How about something like this: JSFIDDLE

$(document).ready(function() {
    $("#show").hide();
    $(".header").click(function() {
        $('.header').removeClass('active');
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 35, 44, 49 )"
        });
        $(this).addClass('active');
        $("#show").show();
    });

    $(".header").mouseenter(function() {
        $(this).css("cursor", "pointer");
        $(this).stop().animate( {
            color: "white",
            backgroundColor: "rgb( 45, 60, 70 )"
        });
    });

    $(".header").mouseleave(function() {

            $(this).stop().animate( {
                color: "#696969",
                backgroundColor: "rgb( 33, 33, 33 )"
            });
    });
});

Kylie · Accepted Answer · 2013-07-10 18:23:53Z

1

Do it like this...

DEMO HERE

$(document).ready(function() {
$("#show").hide();
$(".header").click(function() {
    $('.header').removeClass('active');
    $(this).stop().animate( {
        color: "white",
        backgroundColor: "rgb( 35, 44, 49 )"
    });

    $(this).addClass('active');
    $("#show").show();
});

$(".header").mouseenter(function() {
    $(this).css("cursor", "pointer");
    $(this).stop().animate( {
        color: "white",
        backgroundColor: "rgb( 45, 60, 70 )"
    });
});

$(".header").mouseleave(function() {

        $(this).stop().animate( {
            color: "#696969",
            backgroundColor: "rgb( 33, 33, 33 )"
        });
     });
 });

Then in your css add an active class...

.active {
color:white!important;
background:rgb( 45, 60, 70 )!important;
}

Fiddle Here

answered Jul 10, 2013 at 18:23

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

1 Comment

Christian Heinrichs Over a year ago

Your code does seem to work, but the color of the selected <div> does not match the color of the #back <div>. It should be like this: .active { color:white!important; background:rgb( 35, 44, 49 )!important; } Thanks for your effort.

Collectives™ on Stack Overflow

jQuery navigation header

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related