js实现二级菜单栏切换
一、一级菜单栏和二级菜单在同一个盒子内。
当鼠标经过水果盒子时,让下面的内容显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
font-size: 12px;
}
.box {
position: relative;
width: 100px;
height: 30px;
}
.firstbox {
width: 100%;
height: 100%;
color: #fff;
background-color: brown;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.twobox {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
/* .box:hover .twobox {
display: block;
} */
.twobox>li {
width: 100px;
height: 20px;
line-height: 20px;
background-color: #333;
text-align: center;
color: #fff;
border: 1px solid #ccc;
margin-bottom: -1px;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox">水果</div>
<ul class="twobox">
<li>苹果</li>
<li>香蕉</li>
<li>蓝莓</li>
<li>荔枝</li>
<li>樱桃</li>
</ul>
</div>
<script>
//获取元素
var box = document.getElementsByClassName('box')[0];
var twobox = document.getElementsByClassName('twobox')[0];
//当鼠标经过大盒子的时候触发
box.onmouseover = function () {
twobox.style.display = 'block';
}
//当鼠标离开大盒子的时候触发
box.onmouseout = function () {
twobox.style.display = 'none';
}
</script>
</body>
</html>
二、一级菜单栏和二级菜单栏不在同一个盒子内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
color: #fff;
}
li {
list-style: none;
}
.main {
position: relative;
width: 820px;
height: 410px;
background: url(./cat.jpg);
background-size: cover;
margin: 60px auto;
}
.top {
width: 220px;
height: 410px;
background-color: rgba(25, 5, 22, .5);
}
.top ul {
position: absolute;
top: 25px;
left: 0;
width: 220px;
height: 360px;
}
.top ul li {
padding-left: 35px;
width: 220px;
height: 60px;
line-height: 60px;
}
.current {
background-color: rgba(235, 223, 233, 0.5);
color: #333;
}
.content {
position: absolute;
top: 0;
left: 220px;
width: 600px;
height: 410px;
background-color: rgba(71, 17, 17, 0.1);
}
.con_box {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 410px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<ul>
<li class="current">手机/平板</li>
<li>电脑/配件</li>
<li>音响/智能</li>
<li>电视/平板</li>
<li>电源/配件</li>
<li>耳机/音响</li>
</ul>
</div>
<div class="content">
<div class="item" style="display: block;">手机/平板的内容</div>
<div class="item">电脑/配件的内容</div>
<div class="item">音响/智能的内容</div>
<div class="item">电视/平板的内容</div>
<div class="item">电源/配件的内容</div>
<div class="item">耳机/音响的内容</div>
</div>
</div>
<script>
//获取元素
var lis = document.getElementsByTagName('li');
var items = document.getElementsByClassName('item');
//循环li
for (var i = 0; i < lis.length; i++) {
//给每个小li设置一个索引号
lis[i].index = i;
//鼠标经过li之后触发
lis[i].onmouseover = function () {
//循环二级盒子item,清除每个li和item之前的样式
for (var j = 0; j < items.length; j++) {
lis[j].className = '';
items[j].style.display = 'none';
}
//为当前的li绑定一个current类
this.className = 'current';
//items当前的索引 显示出来
items[this.index].style.display = 'block';
}
}
</script>
</body>
</html>