1

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>

スタイル.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)"
            });
    });
});

助けていただければ幸いです。

4

3 に答える 3

2

あなたがすでに持っているものに対する非常に簡単な解決策。

1行のCSSを追加

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

次に、urスクリプトに1行と1つのメソッドを追加します

$(".header").click(function() {
    $('.active').removeClass('active');
    $(this).addClass('active').stop().animate( {
于 2013-07-10T18:24:13.330 に答える