介绍 & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
,& lt; meta charset=皍tf-8",/比;
,& lt; title>下拉选项卡& lt;/title>
,& lt; style>
,* {
,填充:0 px;
,保证金:0 px;
,字体类型:“微软雅黑“;
,字体大小:12 px;
,}
,ul {
,list-style:没有;
,}
,.head {
,宽度:1000 px;
,高度:50 px;
,保证金:0 px 汽车;
,背景颜色:greenyellow;
,}
ul, .head> {
,显示:块;
,}
李,.head> ul> {
,浮动:左;
,宽度:200 px;
,text-align:中心;
,高度:50 px;
,行高:50 px;
,字体大小:15 px;
,}
,.head> ul>李:{徘徊
,背景颜色:绿色;
,}
,.head> ul>李:hover> ul {
,显示:块;
,}
,.head> ul> li> ul {
,显示:没有;
,位置:绝对;
,}
,.head> ul> li> ul>李{
40岁,身高:px;
,宽度:200 px;
,text-align:中心;
,行高:40像素;
,字体大小:15 px;
,背景颜色:greenyellow;
,margin-top: 5 px;
,}
,.head> ul> li> ul>李:{徘徊
,背景颜色:绿色;
,}
,& lt;/style>
,& lt;/head>
,& lt; body>
,& lt; div 类=癶ead"比;
,& lt; ul>
,& lt; li>
,院系
,& lt; ul>
,& lt; li>计科系& lt;/li>
,& lt; li>电气系& lt;/li>
,& lt; li>食品系& lt;/li>
,& lt; li>机械系& lt;/li>
,& lt;/ul>
,& lt;/li>
,& lt; li>
,学科
,& lt; ul>
,& lt; li>无线传感网& lt;/li>
,& lt; li>计算机组成原理& lt;/li>
,& lt; li> java程序设计& lt;/li>
,& lt; li> c语言& lt;/li>
,& lt;/ul>
,& lt;/li>
,& lt; li>
,专业
,& lt; ul>
,& lt; li>物联网工程& lt;/li>
,& lt; li>软件工程& lt;/li>
,& lt; li>计算机应用& lt;/li>
,& lt; li>计算机科学& lt;/li>
,& lt;/ul>
,& lt;/li>
,& lt; li>
,实验室
,& lt; ul>
,& lt; li>物联网实验室& lt;/li>
,& lt; li>嵌入实验室& lt;/li>
,& lt; li>软件工程实验室& lt;/li>
,& lt; li>扮客人才孵化基地& lt;/li>
,& lt;/ul>
,& lt;/li>
,& lt; li>
,宿舍
,& lt; ul>
617年,& lt; li>宿舍& lt;/li>
618年,& lt; li>宿舍& lt;/li>
619年,& lt; li>宿舍& lt;/li>
620年,& lt; li>宿舍& lt;/li>
,& lt;/ul>
,& lt;/li>
,& lt;/ul>
,& lt;/div>
,& lt;/body>
& lt;/html>
这篇文章主要介绍原生js如何实现下拉选项卡,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
效果如下:
代码如下:
以上是“原生js如何实现下拉选项卡”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
