原生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 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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文本数据库的搜索方法
2006/10/09 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
php解析json数据实例
2014/08/19 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
pandas分批读取大数据集教程
2020/06/06 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
公务员更新知识培训实施方案
2014/03/31 职场文书
保护地球的标语
2014/06/17 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书