js中怎么进行按钮切换变色并切换内容
此刻智妙手机已经普及了，在手机中进行各类设置，老是有点一下就打开，在点一下就封闭如许的按钮，那么在网页中要若何实现呢？
本文就以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绑心猿意马图片的点击事务，实现内容的切换
- 发表于 2018-11-15 00:00
- 阅读 ( 709 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章