js中怎么进行按钮切换变色并切换内容

此刻智妙手机已经普及了，在手机中进行各类设置，老是有点一下就打开，在点一下就封闭如许的按钮，那么在网页中要若何实现呢？

本文就以js + css + 图片为例介绍若何实现这种结果

方式/步调

1. 1

   建立如下布局的测试页面

        -- JqueryButton

            -- Content

                -- Images

                   -- btn-choose.png

                -- Scripts

                   -- jquery-1.11.3.min.js

            -- JqueryButton.html

   
2. 2

   在页面中添加dom布局

        1）引入jquery源文件

        2）添加一个div用于放置选择的图片

        3）添加别的一个div用于放置选择与封闭时的内容

   
3. 3

   在页面添加css样式，用于节制图片与dom内容

   
4. 4

   选择页面利用浏览器打开，此时运行结果如下，因为还没有添加点击事务，所以图片点击是没有用果的

   
5. 5

   在页面添加js，用于处置点击事务

        1）当前若是是打开状况，就切换为封闭状况，同时，显示封闭对应的内容，埋没打开对应的文字内容

        2）若是当前是封闭状况，就切换为打开状况，同时，显示打开对应的内容，埋没封闭对应的文字内容

   
6. 6

   在浏览器中运行结果如下

        1）默认是打开状况，显示打开对应的文字内容

        2）当点击按钮时，将切换为封闭状况，显示封闭对应的内容

   
7. 7

   总结

        1）利用css节制显示图片的哪一部门

        2）利用jquery绑心猿意马图片的点击事务，实现内容的切换