原生js實現(xiàn)下拉選項卡
更新時間：2019年11月27日 14:57:08 作者：濮家大少
這篇文章主要為大家詳細介紹了原生js實現(xiàn)下拉選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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>機械系</li>
</ul>
</li>
<li>
學(xué)科
<ul>
<li>無線傳感網(wǎng)</li>
<li>計算機組成原理</li>
<li>java程序設(shè)計</li>
<li>c語言</li>
</ul>
</li>
<li>
專業(yè)
<ul>
<li>物聯(lián)網(wǎng)工程</li>
<li>軟件工程</li>
<li>計算機應(yīng)用</li>
<li>計算機科學(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í)，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了微信小程序開發(fā)之下拉刷新 上拉加載，具有一定的參考價值，有興趣的可以了解一下。2016-11-11
這篇文章主要給大家介紹了關(guān)于基于three.js編寫的一個項目類的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
原生JS實現(xiàn) MUI導(dǎo)航欄透明漸變效果
透明漸變導(dǎo)航是一種解決滾動條通頂?shù)淖兺ǚ桨?。這篇文章主要介紹了原生JS實現(xiàn) MUI導(dǎo)航欄透明漸變效果,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了js中如何對url進行編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細介紹了js帶鬧鈴功能的倒計時代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了JS獲取鼠標(biāo)坐標(biāo)位置的方法,結(jié)合實例形式分析了JavaScript常見的獲取鼠標(biāo)頁面、屏幕等坐標(biāo)位置的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了微信小程序判斷用戶是否需要再次授權(quán)獲取個人信息,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
JavaScript實現(xiàn)函數(shù)緩存及應(yīng)用場景
在JavaScript中,可以通過函數(shù)緩存來提高函數(shù)的執(zhí)行效率,本文就來介紹一下JavaScript實現(xiàn)函數(shù)緩存及應(yīng)用場景,具有一定的參考價值,感興趣的可以了解一下2024-01-01
昨天中午做項目需要一個模態(tài)窗口，想起上一個公司的項目經(jīng)理曾經(jīng)做過一個比較牛的模態(tài)窗口，至今沒用搞清楚實現(xiàn)原理，平時也沒有時間去分析，試著自己做了一個，用了一天的時間終于完成了，給大家一起分享， 也希望高手多提意見。第一次在博客園上發(fā)文章，挺高興的。2008-11-11
深入理解JavaScript系列（29）：設(shè)計模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（29）：設(shè)計模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下2015-03-03