js怎么实现三个按钮点击那个那个更换样式

JavaScript012

js怎么实现三个按钮点击那个那个更换样式,第1张

可以尝试以下操作：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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 = 0i<arr.lengthi++){

arr[i].onclick = function(){

//this是当前激活的按钮，在这里可以写对应的操作

if(this.className == 'btn1'){

this.className = 'btn2'

var name = this.id

var btn = document.getElementsByClassName('btn2')

for(var j=0j<btn.lengthj++){

if(btn[j].id!=name){

btn[j].className = 'btn1'

}

}

}

}

}

}

</script>

<body>

<div id="main" style="margin:auto 0">

<!--四个按钮-->

<div style="margin-top:2em">

<div style="width:20%"><button id = "1" type = "button">按钮1</button></div>

<div style="width:20%"><button id = "2" type = "button">按钮2</button></div>

<div style="width:20%"><button id = "3" type = "button">按钮3</button></div>

<div style="width:20%"><button id = "4" type ="button">按钮4</button></div>

</div>

</div>

</body>

</html>

你好！

按钮外貌是改不掉的。

现在流行的是一个将file透明度设为0，然后覆盖到自己设计的按钮上的

方式。

这样，用户感觉是漂亮的按钮，其实鼠标按下的是

file

如有疑问，请追问。