目標效果：點擊不同按鈕顯示不同內容 代碼如下 ...
目標效果：點擊不同按鈕顯示不同內容
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input{background-color: white}
.click{background-color: darkcyan}
div{width: 200px;height: 200px;background-color: antiquewhite;display: none}
</style>
<script type="text/javascript">
window.onload=function ()
{
var ainput = document.getElementsByTagName('input');//獲取所有input標簽
var adiv = document.getElementsByTagName('div');//獲取所有div標簽
var i = 0
for (i=0;i<ainput.length;i++)
{
ainput[i].index = i
ainput[i].onclick=function ()//迴圈點擊input標簽
{
for(i=0;i<ainput.length;i++)//迴圈清除input標簽和div標簽樣式某些屬性
{
ainput[i].className='';
adiv[i].style.display='none';
}
// alert('點擊'+this.index+'個按鈕');
adiv[this.index].style.display='block';//當前input所對應的顯示div
this.className='click';
}
}
}
</script>
</head>
<body>
<input type="button" value="1">
<input type="button" value="2">
<div>000</div>
<div>111</div>
</body>
</html>
