原生js实现下拉选项卡


Posted in Javascript onNovember 27, 2019

本文实例为大家分享了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选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
浅析Vue下的components模板使用及应用
Nov 27 #Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
微信小程序表单验证WxValidate的使用
Nov 27 #Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
webgl实现物体描边效果的方法介绍
Nov 27 #Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 #Javascript
You might like
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
jquery 指南/入门基础
2007/11/30 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
如何写毕业求职自荐信
2013/11/06 职场文书
社区国庆节活动方案
2014/02/05 职场文书
公司司机岗位职责
2014/02/07 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
颐和园导游词400字
2015/01/30 职场文书
行政经理岗位职责
2015/04/15 职场文书
乱世佳人观后感
2015/06/08 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android