写一个侧边栏 鼠标悬停左侧菜单栏，右侧内容框显示对应内容
<!DOCTYPE html>
<html>
<head>
<title>侧边栏</title>
<style type="text/css">
#sidebar {
width: 200px;
height: 100%;
background-color: #f5f5f5;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
}
#content {
margin-left: 200px;
padding: 20px;
font-size: 20px;
}
.menu {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
.menu:hover {
background-color: #eee;
}
.active {
background-color: #ddd;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="menu" data-target="content1">菜单1</div>
<div class="menu" data-target="content2">菜单2</div>
<div class="menu" data-target="content3">菜单3</div>
<div class="menu" data-target="content4">菜单4</div>
</div>
<div id="content">
<div id="content1" class="active">这是菜单1的内容</div>
<div id="content2">这是菜单2的内容</div>
<div id="content3">这是菜单3的内容</div>
<div id="content4">这是菜单4的内容</div>
</div>
<script type="text/javascript">
var menus = document.querySelectorAll(".menu");
var contents = document.querySelectorAll("#content > div");
<pre><code> for (var i = 0; i < menus.length; i++) {
menus[i].addEventListener("mouseover", function() {
var target = this.getAttribute("data-target");
var content = document.getElementById(target);
for (var j = 0; j < contents.length; j++) {
contents[j].classList.remove("active");
}
content.classList.add("active");
});
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/tyv 著作权归作者所有。请勿转载和采集!