<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.btn{
margin: 20px 120px;
width: 80px;
}
.content{
margin: 10px auto;
display: none;
}
.btn.active{
background-color: pink;
}
.content.show{
display:block;
}
</style>
</head>
<body>
<p class="btn1">
<button class="btn active">頁面一</button>
<button class="btn">頁面二</button>
<button class="btn">頁面三</button>
</p>
<div class="content show">
<p>頁面一要顯示的內容</p>
<input type="text" placeholder="頁面一內容"/>
</div>
<div class="content">
<p>頁面二要顯示的內容</p>
<input type="text" placeholder="頁面二內容" />
</div>
<div class="content" >
<p>頁面三要顯示的內容</p>
<input type="text" placeholder="頁面三內容"/>
</div>
<script>
//獲取頁面的每個按鈕
var btns = document.getElementsByClassName("btn")
//獲取內容盒子
var contents = document.getElementsByClassName("content")
//遍歷每個按鈕為其添加點擊事件
for(var i=0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function(){
//對當前點擊的按鈕賦予active類名及顯示當前按鈕對應的內容
for(var j=0;j<btns.length;j++){
btns[j].className = btns[j].className.replace(' active', '').trim();
contents[j].className = contents[j].className.replace(' show', '').trim();
}
this.className = this.className + ' active';
contents[this.index].className = contents[this.index].className + ' show';
};
}
</script>
</body>
</html>
