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

红太狼 2020-06-06 18:56 765阅读 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 条评论，765人围观）

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

相关阅读

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

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

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

相关如何利用js实现选项卡效果（超简单）

在开始写我们的选项卡之前，先来看一下最终实现的大概效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

妖狐艹你老母/ 2023年07月20日 13:43/ 0 赞/ 27 阅读

相关前端如何使用js实现选项卡功能

选项卡是前端常见的基本功能，它是用多个标签页来区分不同内容，通过选择标签快速切换内容。学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础

喜欢ヅ旅行/ 2023年07月18日 11:16/ 0 赞/ 119 阅读

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

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

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

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

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

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

相关 js选项卡

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

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

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

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

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

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

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

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

相关 JS实现选项卡切换

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

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

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

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

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