javascript - ページを更新せずにjQueryのスタイルスイッチャー

Question

私は現在、default.css スタイル
を持つ 1 つのページを持っています。1 つの style1.css ファイルがあり、もう 1 つは style2.css ファイルです。
2 つのオプションを持つ 1 つの UI ドロップダウンリストがあります。

1 つを選択したら、style1.css を適用し、他にも同じことを適用します。

ページを更新しないでください。

これどうやってするの？

Answer 1

特定のコンテキストがない場合は、 jQuery toggleClass()の使用を検討することをお勧めします。

この例の div がデフォルトのスタイルstyle1を使用し、ボタンがスタイルを切り替えるこのような HTML があるとします。

<div id="myDiv" class="style1"></div>
<button id="myButton">Switch Styles</button>

さらに、style1別のスタイルが定義されている場合は、次のように言いstyle2ます。

.style1{
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

.style2{
    width: 200px;
    height: 150px;
    border: 3px solid blue;
}

メソッドを使用してボタンをクリックしたときにそれらを切り替えるには、次のtoggleClass()ことができます。

$(document).ready(function(){
    $("#myButton").on("click", function(){
        $("#myDiv").toggleClass("style2");
    });
});

デモを見る

もちろん、ボタンだけでなく、どこからでもトグルをトリガーできます。これは単なる例です。

Answer 2

http://api.jquery.com/addClass/とhttp://api.jquery.com/removeClass/を見てください