此刻智妙手机已经普及了 ， 在手机中进行各类设置 ， 老是有点一下就打开 ， 在点一下就封闭如许的按钮 ， 那么在网页中要若何实现呢？
本文就以js + css + 图片为例介绍若何实现这种结果
方式/
1建立如下布局的测试页面
-- JqueryButton
-- Content
-- Images
-- btn-choose.png
-- Scripts
【js中怎么进行按钮切换变色并切换内容】 -- 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绑定图片的点击事务 ， 实现内容的切换
文章插图
推荐阅读
- 12306怎么添加乘车人
- 支付宝怎么开通商家信用分
- WPS excel表格同时满足多个条件公式怎么表达
- 怎么查看win10系统版本
- 固态硬盘怎么区分好坏
- ET打版教程——端移动1
- Win10怎么默认用Windows照片查看程序打开图片
- 像素射击手游怎么更换人物皮肤
- 手机号码被别人注册了12306怎么办
- 手机能连接上wifi但不能上网怎么办