原生js实现下拉选项卡
更新时间：2019年11月27日 14:57:08 作者：濮家大少
这篇文章主要为大家详细介绍了原生js实现下拉选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现下拉选项卡的具体代码，供大家参考，具体内容如下
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉选项卡</title>
<style>
*{
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
font-size: 12px;
}
ul{
list-style: none;
}
.head{
width: 1000px;
height: 50px;
margin: 0px auto;
background-color: greenyellow;
}
.head>ul{
display: block;
}
.head>ul>li{
float: left;
width: 200px;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 15px;
}
.head>ul>li:hover{
background-color: green;
}
.head>ul>li:hover>ul{
display: block;
}
.head>ul>li>ul{
display: none;
position: absolute;
}
.head>ul>li>ul>li{
height: 40px;
width: 200px;
text-align: center;
line-height: 40px;
font-size: 15px;
background-color: greenyellow;
margin-top: 5px;
}
.head>ul>li>ul>li:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="head">
<ul>
<li>
院系
<ul>
<li>计科系</li>
<li>电气系</li>
<li>食品系</li>
<li>机械系</li>
</ul>
</li>
<li>
学科
<ul>
<li>无线传感网</li>
<li>计算机组成原理</li>
<li>java程序设计</li>
<li>c语言</li>
</ul>
</li>
<li>
专业
<ul>
<li>物联网工程</li>
<li>软件工程</li>
<li>计算机应用</li>
<li>计算机科学</li>
</ul>
</li>
<li>
实验室
<ul>
<li>物联网实验室</li>
<li>嵌入实验室</li>
<li>软件工程实验室</li>
<li>扮客人才孵化基地</li>
</ul>
</li>
<li>
宿舍
<ul>
<li>617宿舍</li>
<li>618宿舍</li>
<li>619宿舍</li>
<li>620宿舍</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
本篇文章主要介绍了微信小程序开发之下拉刷新 上拉加载，具有一定的参考价值，有兴趣的可以了解一下。2016-11-11
这篇文章主要给大家介绍了关于基于three.js编写的一个项目类的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
透明渐变导航是一种解决滚动条通顶的变通方案。这篇文章主要介绍了原生JS实现 MUI导航栏透明渐变效果,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了js中如何对url进行编码和解码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
这篇文章主要为大家详细介绍了js带闹铃功能的倒计时代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了微信小程序判断用户是否需要再次授权获取个人信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
在JavaScript中,可以通过函数缓存来提高函数的执行效率,本文就来介绍一下JavaScript实现函数缓存及应用场景,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
昨天中午做项目需要一个模态窗口，想起上一个公司的项目经理曾经做过一个比较牛的模态窗口，至今没用搞清楚实现原理，平时也没有时间去分析，试着自己做了一个，用了一天的时间终于完成了，给大家一起分享， 也希望高手多提意见。第一次在博客园上发文章，挺高兴的。2008-11-11
深入理解JavaScript系列（29）：设计模式之装饰者模式详解
这篇文章主要介绍了深入理解JavaScript系列（29）：设计模式之装饰者模式详解,装饰者用用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用（例如装饰者的构造函数）,需要的朋友可以参考下2015-03-03
最新评论