javascript 左侧菜单
<!DOCTYPE html>
<html >
<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 ></div>
<div >
<div class="item">
<div class="header" onclick="ChangeMenu('i1')">菜单一</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div id = 'i2' class="header" onclick="ChangeMenu('i2')">菜单二</div>
<div class="content">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div id = 'i3' class="header" onclick="ChangeMenu('i3')">菜单三</div>
<div class="content">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
</div>
<!--修改菜单功能-->
<script>
function ChangeMenu(mid) {
var current_header = document.getElementById(mid); //当前头部
console.log(current_header);
var current_base_header = current_header.parentElement.parentElement
console.log(current_base_header);
var current_list = current_base_header.children;
for(var i=0;i<current_list.length;i++){
var current_item = current_list[i];
current_item.children[1].classList.add("hide");
}
current_header.nextElementSibling.classList.remove('hide')
}
</script>
</body>
</html>相关推荐
css+javascript下拉菜单
http://blog.ybj86.cn/article.asp?id=132
时间：2023-11-08 20:47
