1

HTMLページオプションを作成しようとしています。このオプションメニューは、ホバーまたはクリックで表示されるパネルで、そこから色や背景パターンなどを変更できます。これは css ファイルを変更しているか、何か他のことを行っていると思いますが、方法がわかりません。Google で何かを検索しようとしましたが、見つかりませんでした。

私が探しているものを理解していない場合は、このページを見てください。「+」ボタンにカーソルを合わせると表示されます。 http://themes.fbpixel.com/?theme=Landisimo%20-%20Landing%20ページ

編集: この種のことのために既に行われた jquery プラグインを誰かが知っている場合は、リンクを送信してください。

EDIT2：私が本当に欲しいのは、私が行ったプロパティの変更を保持するプラグインであり、別のWebサイトページに移動すると、最初のページで選択した色になります。例は次のとおりです。私のホームページ ページは赤で、パネル オプションから青を選択し、ブログ ページに移動すると、そのページの色は青になります (前のページで選択した色)。

ありがとうございました。

4

1 に答える 1

2

次のような HTML を実行できます。

<body class="red">
    <p>Some text</p>
    <a href="#" id="paint-blue">paint blue</a>
    <a href="#" id="paint-red">paint red</a>
</body>

CSS:

body.red {
    background-color: red;
}

body.red p {
    color: yellow;
}

body.blue {
    background-color: blue;
}

body.blue p {
    color: white;
}
/* Some more stuff */

JS:

$("#paint-blue").click(function(event) {
    event.preventDefault();
    $("body").removeClass("red").addClass("blue");
}

$("#paint-red").click(function(event) {
    event.preventDefault();
    $("body").removeClass("blue").addClass("red");
}

トップレベルbody要素のクラスに応じて、ページ上の一部の要素のスタイルが異なるという考え方です。

編集:リンク先のサンプルページは、Cookie を使用して選択したテーマを保存し、その外観から、常に黄色のテーマをロードし、一部のonloadJS が Cookie の値をチェックして色を変更します。 これは、 JSを使用して Cookie を設定および読み取るためのランダムなチュートリアルです。そして、onload事は次のようになります：

$(document).ready(function() {
    // Should be easy to write if you look at the tutorial
    var colour = getColourFromCookie();
    if (colour == 'blue') {
        $("#paint-blue").click();
    }
    // red is default, no need to do anything
});

サンプル サイトよりも優れている点の 1 つは、常に 1 つのバージョンをレンダリングしてからクライアント側で変更するのではなく、Cookie の値に応じて別のページ (別のボディ クラス) をレンダリングできることです。少なくとも私のコンピューターでは、 JS が作動して色を変更するまでの明らかな遅延。

于 2012-12-30T09:04:39.413 に答える