javascript - ボタンでdivのクラスを切り替えます

Question

TwitterBootstrapを使って基本的なサイトを作っています

使用したいdivが1つとクラスが2つあります。divのクラスを変更し、もう一度クリックした後、元に戻すボタンを実装したいと思います。

多くの方法が見つかりましたが、クラスを元に戻す方法はありません。最善の方法は、BootstrapJSまたはJqueryを使用することです。

ありがとう

Answer 1

デモ1： http: //jsfiddle.net/Jsqh4/
デモ2（別のボタン）：http：//jsfiddle.net/Jsqh4/1/

BootstrapはコンポーネントにjQueryを使用するため、jQueryソリューションがおそらく最も簡単です。

<style>
    .style1{ background-color: yellow; }
    .style2{ background-color: green; }​
</style>

<div id="div1" class="style1">
    Here is a div.
</div>

<input type="button" id="btn1" value="Click Me" />

<script>
    $("#btn1").click(function(){
        $("#div1").toggleClass("style2");
    });
</script>

参照：http ：//api.jquery.com/toggleClass/

Answer 2

残念ながら、受け入れられた回答にコメントするのに十分な担当者がいません...

上書きされないいくつかのスタイルを見逃すリスクを回避するために、両方のクラスを切り替えます。

<style>
    .style1{ background-color: yellow; }
    .style2{ background-color: green; }​
</style>

<div id="div1" class="style1">
    Here is a div.
</div>

<input type="button" id="btn1" value="Click Me" />

<script>
    $("#btn1").click(function(){
        $("#div1").toggleClass("style1");
        $("#div1").toggleClass("style2");
    });
</script>