4.2 样式的切换

jQuery还提供了一个方法toggleClass()，官方解释是对元素进行添加/删除类的切换操作。例如，页面中有一个按钮，单击这个按钮，页面中所有文字由黑色变为红色，再次单击这个按钮，文字又变回黑色。如果我们用JS代码实现这个效果，那么可能首先需要判断文字是黑色还是红色，然后指定文字的颜色样式。

在jQuery中，一个toggleClass()就全部搞定了。我们演示一下这种网页颜色的切换。

【示例4-2】toggleClass.html

        01    <script>
        02    $(document).ready(function(){
        03        $("button").click(function(){
        04           $("h1, h2, p").toggleClass("blue");  //直接使用toggleClass()
        05        });
        06    });
        07    </script>
        08    <style>
        09    .blue {
        10        color: blue;
        11    }
        12    </style>
        13
        14    <body>
        15   <h1>标题1</h1>
        16   <h2>标题2</h2>
        17   <p>这是一个美好的春天</p>
        18   <p>一起去吹风</p>
        19   <button>切换颜色</button>
        20    </body>

第04行使用toggleClass()方法设置3个元素的颜色为blue。单击页面中的“切换颜色”按钮，效果如图4.3所示。再次单击该按钮，页面恢复默认效果，如图4.4所示。

图4.3 单击后出现的颜色

图4.4 再次单击出现的颜色

上一章目录下一章