原生js實現(xiàn)下拉選項卡
更新時間：2019年11月27日 14:57:08 作者：濮家大少
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)下拉選項卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)下拉選項卡的具體代碼，供大家參考，具體內(nèi)容如下
效果如下：
代碼如下：
<!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>機(jī)械系</li>
</ul>
</li>
<li>
學(xué)科
<ul>
<li>無線傳感網(wǎng)</li>
<li>計算機(jī)組成原理</li>
<li>java程序設(shè)計</li>
<li>c語言</li>
</ul>
</li>
<li>
專業(yè)
<ul>
<li>物聯(lián)網(wǎng)工程</li>
<li>軟件工程</li>
<li>計算機(jī)應(yīng)用</li>
<li>計算機(jī)科學(xué)</li>
</ul>
</li>
<li>
實驗室
<ul>
<li>物聯(lián)網(wǎng)實驗室</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>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解微信小程序的不同函數(shù)調(diào)用的幾種方法
這篇文章主要介紹了微信小程序的不同函數(shù)調(diào)用的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
javascript基本數(shù)據(jù)類型及類型檢測常用方法小結(jié)
這篇文章主要介紹了javascript基本數(shù)據(jù)類型及類型檢測常用方法,總結(jié)分析了javascript的基本數(shù)據(jù)類型與類型檢測的常用操作方法,具有一定參考借鑒價值,需要的朋友可以參考下2016-12-12
js+html5實現(xiàn)canvas繪制鏤空字體文本的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制鏤空字體文本的方法,涉及html5文字效果的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JS自動生成動態(tài)HTML驗證碼頁面，輸入錯誤自動清空輸入框的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了JS使用H5實現(xiàn)圖片預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
下載網(wǎng)站打開頁面后間隔多少時間才顯示下載鏈接地址的代碼
有時候可能為了一些更好的廣告效果等原因，需要讓用戶等待一段時間以后，再顯示真實下載地址代碼，有利于緩解服務(wù)器壓力。2010-04-04
這篇文章主要為大家詳細(xì)介紹了js類式繼承與原型式繼承，感興趣的小伙伴們可以參考一下2016-04-04
javascript 身份證號碼驗證函數(shù)(可辨真?zhèn)?，支?5或18位身份證號)測試誤差為0
javascript 身份證號碼驗證函數(shù)(可辨真?zhèn)?，支?5或18位身份證號)測試誤差為0 ，非常不錯，其實主要是特別熟悉身份證的算法。2010-05-05
彈出層組件用于彈出一個覆蓋到頁面上的內(nèi)容，本文主要介紹了uniapp組件uni-popup彈出層的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
在頁面中循環(huán)添加到select中，但是在ie8中就一直提示 缺少id未定義，經(jīng)測試發(fā)現(xiàn)數(shù)組的最后多了個逗號，把逗號去掉就好了2014-03-03