如何使用原生js实现下拉选项卡

红太狼 2020-06-06 18:56 663阅读 0赞

# 如何使用原生js实现下拉选项卡

先来看一下实现效果：

![](/images/1591469797310.png)
代码如下：

```html
<!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>
```

发表评论取消回复

表情：

评论列表（有 0 条评论，663人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用面向对象的方法实现原生js选项卡实例教程

本教程通过js面向对象的方法来封装一个选项卡的实例，在实例中讲解js的面向对象如何实现功能。一般封装好的选项卡程序，只需要一个div元素即可。其它元素都是通过json数据来

布满荆棘的人生/ 2023年07月26日 05:30/ 0 赞/ 103 阅读

相关原生js,实现上拉加载--下拉刷新

//------- -------上拉加载更多--------------- //获取滚动条当前的位置

骑猪看日落/ 2023年05月31日 07:21/ 0 赞/ 45 阅读

相关原生js下拉刷新和上拉刷新

参考来源：[https://www.cnblogs.com/panyujun/p/11972872.html][https_www.cnblogs.com_panyujun_p

古城微笑少年丶/ 2022年12月05日 15:25/ 0 赞/ 176 阅读

相关原生js实现下拉到底事件

1.获取三个高度页面滚动距离、文档总高度、浏览器视口高度 ![复制代码][copycode.gif] //滚动条在Y轴上的滚动距离 function get

小咪咪/ 2022年08月21日 11:41/ 0 赞/ 182 阅读

相关使用css+js制作选项卡

选项卡制作 ![Image 1][] ![Image 1][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

古城微笑少年丶/ 2022年08月10日 10:59/ 0 赞/ 206 阅读

相关 js选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

阳光穿透心脏的1/2处/ 2022年07月30日 13:55/ 0 赞/ 234 阅读

相关原生js实现弹性下拉菜单和弹性碰撞下拉菜单

弹性下拉菜单和弹性碰撞下拉菜单，其实基本的实现过程是一样的，不同的是，弹性下拉菜单是围绕着目标点上下弹跳直到停止，而弹性碰撞下拉菜单是在目标点上面做弹跳运动直到停止

曾经终败给现在/ 2022年05月29日 07:10/ 0 赞/ 285 阅读

相关 JS代码实现选项卡功能

在平时的网页开发中会遇到很多选项卡功能的情况，下面通过一个简单的例子说明选项卡如何实现首先，选项卡基本的样式会有可以点击的选项按钮，以及按钮对应的显示内容。这是一个基本的

一时失言乱红尘/ 2022年03月20日 07:41/ 0 赞/ 283 阅读

相关 JS实现选项卡切换

面是用JS简单地实现选项卡功能的实例。 > 注意点：（1）闭包后，要使用立即执行函数； > > （2）绑定事件注意参数； > > （3）思路：将当前div显示，其余隐藏，

悠悠/ 2021年12月03日 10:45/ 0 赞/ 451 阅读

相关如何使用原生js实现下拉选项卡

如何使用原生js实现下拉选项卡先来看一下实现效果：

红太狼/ 2020年06月06日 18:56/ 0 赞/ 664 阅读