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');//循环lifor (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>
