CODEWITHSUNDEEP
jqueryhtmlcss
Christian Heinrichs
Christian Heinrichs

Reputation: 796

jQuery navigation header

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.

Upvotes: 1

Views: 440

Answers (3)

SpYk3HH
SpYk3HH

Reputation: 22570

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( {

Upvotes: 2

Kylie
Kylie

Reputation: 11749

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

Upvotes: 1

DevlshOne
DevlshOne

Reputation: 8457

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 )"
            });
    });
});

Upvotes: 1

Related Questions