<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.item .header{
height: 35px;
background-color: #2459a2;
color:white;
line-height: 35px;
}
</style>
</head>
<body>
<div style="height:48px;"></div>
<div style="width:300px;">
<div class="item">
<div id='i1' class="header" οnclick="changeMenu('i1');">菜單1</div>
<div class="content">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<div class="item">
<div id='i2' class="header" οnclick="changeMenu('i2');">菜單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
<div class="item">
<div id='i3' class="header" οnclick="changeMenu('i3');">菜單3</div>
<div class="content hide">
<div>內容3</div>
<div>內容3</div>
<div>內容3</div>
</div>
</div>
<div class="item">
<div id='i4' class="header" οnclick="changeMenu('i4');">菜單4</div>
<div class="content hide">
<div>內容4</div>
<div>內容4</div>
<div>內容4</div>
</div>
</div>
</div>
<script>
function changeMenu(nid){
var current_nid = document.getElementById(nid);
var item_list = current_nid.parentElement.parentElement.children;
console.log(item_list);
for(var i=0; i<item_list.length; i++){
var current_item = item_list[i];
current_item.children[1].classList.add('hide');
}
//console.log(item_list);
current_nid.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
![在這裏插入圖片描述]()
