Question

我在Codecademy的jQuery轨道上的最后一个练习遇到了问题。

我正在尝试尽可能接近地重新创建导航标题，但是当我点击它时，我找不到让所选div保持选中状态的方法。

这是工作jsFiddle。

以下是原始代码：

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

帮助将不胜感激。

Answer 1

非常容易解决您已有的问题。

添加一行CSS

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

然后在你的脚本上添加一行和一个方法

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

Answer 2

这样的事情：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 )"
            });
    });
});

Answer 3

这样做......

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

然后在你的CSS中添加一个活跃的类......

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

Fiddle Here

jQuery导航头

3 个答案: