js控制点击按钮样式切换!
2017-04-27 11:09
459 查看
html代码:
my.css
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js控制按钮样式切换</title> <link href="css/my.css" rel="stylesheet"> </head> <script type="text/javascript"> //左边按钮的点击事件 window.onload = function(){ var arr = document.getElementsByTagName('button'); for(var i = 0;i<arr.length;i++){ arr[i].onclick = function(){ //this是当前激活的按钮,在这里可以写对应的操作 if(this.className == 'btn1'){ this.className = 'btn2'; var name = this.id; var btn = document.getElementsByClassName('btn2'); for(var j=0;j<btn.length;j++){ if(btn[j].id!=name){ btn[j].className = 'btn1'; } } } } } } </script> <body> <div id="main" style="margin:auto 0"> <!--四个按钮--> <div style="margin-top:2em;" align="center"> <div style="width:20%"><button id = "1" type = "button" class = "btn2"> 按钮1</button></div> <div style="width:20%"><button id = "2" type = "button" class = "btn1"> 按钮2</button></div> <div style="width:20%"><button id = "3" type = "button" class = "btn1"> 按钮3</button></div> <div style="width:20%"><button id = "4" type ="button" class = "btn1"> 按钮4</button></div> </div> </div> </body> </html>
my.css
.btn1{ border:none; height:3.5em; background-color:#000000; color:white; font-size:1.2em; margin-top:0.5em; width:100%; border-radius:1em; } .btn2{ border:none; height:3.5em; background-color:#3E8CD0; color:white; font-size:1.2em; margin-top:0.5em; width:100%; border-radius:1em; }
效果图:
相关文章推荐
- js图片轮播可控制是否循环轮播,点击左右按钮切换
- 原生JS编写图片切换效果和点击按钮的样式变化
- js 控制按钮点击后不可用
- jquery 点击按钮切换样式on方法使用
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- js控制一个按钮是否可点击(可使用)disabled
- js和css控制鼠标略过和点击后的样式
- js实现点击上下按钮,图片向上向下循环滚动切换
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- js控制表单页面分页显示并使点击切换页面的标题变色显示
- [前端] js点击按钮改变样式
- JS控制点击按钮图片向左或向右循环移动滚动效果
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
- js控制当再次点击按钮时的间隔时间
- JS+CSS带数字和左右按钮可控制切换的图片幻灯
- JS点击事件触发弹出窗口样式控制
- js控制再次点击按钮之间的间隔时间可防止重复提交
- 用 JS 点击左右按钮 使图片切换 - 最精简版
- 利用JS实现点击按钮后图片自动切换
- js控制td悬浮和点击时的样式