现在智能手机已经普及了，在手机中进行各种设置，总是有点一下就打开，在点一下就关闭这样的按钮，那么在网页中要如何实现呢？本文就以js + css + 图片为例介绍如何实现这种效果
方法/步骤
1
创建如下结构的测试页面 -- JqueryButton -- Content -- Images -- btn-choose.png -- Scripts -- jquery-1.11.3.min.js -- JqueryButton.html
2
在页面中添加dom结构 1）引入jquery源文件 2）添加一个div用于放置选择的图片 3）添加另外一个div用于放置选择与关闭时的内容
3
在页面添加css样式，用于控制图片与dom内容
4
选择页面使用浏览器打开，此时运行效果如下，由于还没有添加点击事件，所以图片点击是没有效果的
5
在页面添加js，用于处理点击事件 1）当前如果是打开状态，就切换为关闭状态，同时，显示关闭对应的内容，隐藏打开对应的文字内容 2）如果当前是关闭状态，就切换为打开状态，同时，显示打开对应的内容，隐藏关闭对应的文字内容
6
在浏览器中运行效果如下 1）默认是打开状态，显示打开对应的文字内容 2）当点击按钮时，将切换为关闭状态，显示关闭对应的内容
7
总结 1）使用css控制显示图片的哪一部分 2）使用jquery绑定图片的点击事件，实现内容的切换
上一篇：如何排解产后妈妈一人带孩的焦虑
下一篇：如何看透司法考试并快速通过