标签：菜单 hide parentElement menu js 003 内容 idd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
width: 90px;
height: 36px;
line-height: 36px;
background-color: #e75e15;
border-bottom: 1px solid brown;
}
.menu:hover{
background-color: #77a9f9;
}
.hide{
display: none;
}
</style>
</head>
<body style="width: 980px;margin:0 auto;background-color: #dbd6ad">
<div>
<div class="item">
<div class="menu" id="i1" onclick="change_menu('i1')">菜单一</div>
<div class="content ">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
<div class="item">
<div class="menu" id="i2" onclick="change_menu('i2')">菜单二</div>
<div class="content hide">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
<div class="item">
<div class="menu" id="i3" onclick="change_menu('i3')">菜单三</div>
<div class="content hide">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
</div>
<script>
function change_menu(idd){
items = document.getElementById(idd).parentElement.parentElement.children;
for(var i=0;i<items.length;i++){
items[i].lastElementChild.classList.add('hide');
}
document.getElementById(idd).nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
标签：菜单,
hide,
parentElement,
menu,
js,
003,
内容,
idd
From： https://www.cnblogs.com/lfyxys/p/16911110.html