1

これが、stackoverflow に関する私の最初の投稿です。

2 つの異なる背景色を切り替える CSS を作成しました。

.body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #999;
        transition: background 5s;
        webkit-transition: background 5s;
}
.bodyclick {
    background-color:#333

}

これはフォト ギャラリー タイプのページ用で、さまざまな背景オプションを使用して画像を表示するのが好きです。また、javascript/jQuery を使用して、「プロジェクト名」クラスのオブジェクトがクリックされたときに 2 つの色の間で遷移し、現在の背景状態を Cookie に保存して、別のページを移動しても背景色が一定に保たれるようにしました。

// toggles 'bodyclick' class on the body based on the click of an object with the class projectname and sets the state in a cookie

$(document).ready(function() {

    var button = $('.projectname');

    //check the cookie when the page loads
    if ($.cookie('currentToggle') === 'hidden') {
        toggleBackground(button, false);
    }
    else {
        toggleBackground(button, true);
    }

    //handle the clicking of the background (projectname)  toggle button
    button.click(function() {
        //toggle the background as required, base on current state
        if ($('.body').hasClass('bodyclick')) {
            toggleBackground($(this), true);
        }
        else {
            toggleBackground($(this), false);
        }
    });

});

function toggleBackground(button, show) {

    var background = $('.body');

    if (show) {
        background.removeClass('bodyclick');
        $.cookie('currentToggle', '', { path: '/' });
    }
    else {
        background.addClass('bodyclick');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
};

私が今持っている唯一の問題は、Cookie が濃い灰色に設定されていて、別のページを更新または移動すると、ページが読み込まれると、一定のままではなく、デフォルトの色 (白) から濃い灰色に移行することです。CSS から遷移プロパティを削除すると、必要な色にすぐに読み込まれますが、クリックして背景を変更するときの遷移効果が好きです。

ライブで見たい方はこちらのページへ

右下の「投稿消費者」というテキストをクリックして色を変更し、更新するか、別のページに移動します。

ページの読み込みではなくクリックしたときのみ、または質問をより明確にする必要がある場合にのみ、この移行を行う方法を教えてください。

また、副次的な質問として。私のjavascriptで「hidden」と「show」の値が何をしているのか、誰でも説明できますか? 私はプログラミングが初めてで、stackoverflow の投稿からコードを借りて、必要に応じて変更しましたが、それらの値がどのように機能するかを完全には理解していません。

4

1 に答える 1