原生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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
浅析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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
ionic2中使用自动生成器的方法
2018/03/04 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python探索之Metaclass初步了解
2017/10/28 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Python简易版图书管理系统
2019/08/12 Python
python爬取微博评论的实例讲解
2021/01/15 Python
web页面录屏实现
2019/02/12 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
物流经理自我评价
2013/09/23 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
任长霞观后感
2015/06/16 职场文书