<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
</head>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid red;
margin-top: 10px;
display: none;
}
</style>
<body>
<input type="button" id="" value="按鈕1" / style="background: red;">
<input type="button" id="" value="按鈕2" />
<input type="button" id="" value="按鈕3" />
<div style="display: block;">選項1</div>
<div>選項2</div>
<div>選項3</div>
</body>
<script>
//首先加載事件
window.onload = function(){
var inputs = document.querySelectorAll("input");
var divs = document.querySelectorAll("div");
//循環每個button
for(var i = 0;i<inputs.length;i++){
inputs[i].onclick = function(){
for(var i=0;i<inputs.length;i++){
inputs[i].index = i;
inputs[i].style.background = ''
divs[i].style.display="none";
}
this.style.background = "red";
divs[this.index].style.display = "block";
}
}
}
</script>
</html>
