看似簡單的小功能,坑卻不少...主要為了練習一下自己的js實踐能力,真是不寫不知道,這麼小小的乙個東西我遇到的坑實在是太多了,放上來僅供參考學習..優化什麼的都不好....
效果如圖所示:
**如下:
doctype html>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>qq列表
title
>
<
style
>
#list
ul, li, h2
#list ul
.item li
h2h2.active
.item .current
style
>
head
>
<
body
>
<
ul id
="list"
>
<
li>
<
h2>小學弟們
h2>
<
ul class
="item"
>
<
li>陳思遠
li>
<
li>胡嘉怡
li>
<
li>黃子恆
li>
<
li>劉丹
li>
<
li>南極翁
li>
<
li>馬鵬飛
li>
<
li>麻怡若
li>
ul>
li>
<
li>
<
h2>我的好友
h2>
<
ul class
="item"
>
<
li>程曦
li>
<
li>付柳元
li>
<
li>黃環
li>
<
li>劉巧麗
li>
<
li>餘萌
li>
<
li>沈潤
li>
<
li>徐婷
li>
ul>
li>
<
li>
<
h2>大學同學
h2>
<
ul class
="item"
>
<
li>蔡中勇
li>
<
li>丁玉成
li>
<
li>陳欣欣
li>
<
li>楊帥
li>
<
li>杜同舟
li>
<
li>李丹丹
li>
<
li>李濟雨
li>
ul>
li>
<
li>
<
h2>高中同學
h2>
<
ul class
="item"
>
<
li>方祥
li>
<
li>胡曉歡
li>
<
li>李連松
li>
<
li>劉一澤
li>
<
li>羅勇
li>
<
li>毛蒙
li>
<
li>衛齊
li>
ul>
li>
ul>
body
>
<
script
>
window.onload
=function
()else
else}}
}}//為每個li加上點選事件
varliarr =;
for(
varj=0
,aullen
=aul.length;j
<
aullen;j++)
}if(
this
.classname
==''
)else}}
}//alert(liarr.length);
}script
>
html
>
原生js實現二級聯動下拉列表選單
二級聯動下拉列表選單的難點在於對後台返回的資料進行解析,不多逼逼,直接上 上圖是後台返回的資料 實現 如下 var devicenotexist true 防止資料重複 if data.code 0 tim j push period break if devicenotexist dev.push...
二級選單聯動js
script src city.js script 建立文件片段,使用完後釋放 var flag document.createdocumentfragment 建立城市下拉框 var select document.createelement select 給城市下拉框乙個id select.id...
css 實現動態二級選單
動態實現簡單的二級選單 當滑鼠放到一級標籤上時,滑鼠會變成小手的形狀 展示二級選單,原始碼如下,複製即可直接使用 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 meta name viewport content width ...