javascript - 制作按钮切换 div 的类

Question

我正在使用 Twitter Bootstrap 制作一些基本网站

我有一个 div 和两个要使用的类。我想实现将更改 div 的类的按钮，然后再次单击后将其更改回来。

找到了很多方法，但没有一个能改回来。最好的方法是使用 Bootstrap JS 或 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>