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>

使用js实现二级菜单栏切换相关推荐

vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
如何实现二级菜单 html,javascript,html5_如何用vue实现二级菜单栏，javascript,html5,html,vue.js - phpStudy...
如何用vue实现二级菜单栏这是我的代码 import Menu from '../../libs/menu'; export default { data () { return { msg: '登 ...
HTML+CSS制作二级菜单栏
今天我们来练习一下二级菜单栏,说实话比较简单,但是自己一个人写的时候错误百出,逻辑混乱,于是乎网上找了几个案例,借鉴了一下思路,才整明白,鄙人确实不才,哈哈! 效果图附上: 首先:我已链接了外部样式重 ...
html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果 ...
微信小程序之创建顶部tab菜单栏切换（新手学习）
关于顶部菜单tab菜单栏切换,可以有两种写法,但是都是用到swiper这个视图插件.插件介绍可以查看微信小程序开放文档. 第一种方式: 效果图 .wxml <view>tap切换方法一& ...
导航栏以及二级菜单栏（下拉列表）的制作
作为新手小白,在我们熟悉了HTML , CSS,JS的功能和语法之后,Web前端开发中,更重要的还有界面的美化,主要依据CSS的庞大功能来实现,今天我来给大家分享的是,利用html代码来实现横向导航栏 ...
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例
本文实例讲述了JS实现的tab切换并显示相应内容模块功能.分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块. 二层循环将元素 ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...

使用js实现二级菜单栏切换

js实现二级菜单栏切换

使用js实现二级菜单栏切换相关推荐

最新文章

热门文章