1. 程式人生 > >js五道經典練習題--第四道qq好友列表

js五道經典練習題--第四道qq好友列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style: none;
}
#list{
width:100px;
margin: 0 auto;
border: 1px solid #ddd;
}
#list ul{
display: none;
}
#list ul li{
height: 40px;
border-bottom: 1px solid #ddd;
line-height: 40px;
text-indent: 10px;
cursor: pointer;
}
#list ul li.hover{
background: blueviolet;
color: #eee;
}
#list li span{
display: inline-block;
height: 40px;
border-bottom: 1px solid #ddd;
width: 100%;
line-height: 40px;
cursor: pointer;
}
#list li span.active{
background: burlywood;
color: #eee;
}
</style>
</head>
<body>
<ul id="list">
<li>
<span>我的好友</span>
<ul>
<li>張三</li>
<li>王五</li>
<li>李四</li>
<li>趙錢</li>
</ul>
</li>
<li>
<span>我的</span>
<ul>
<li>張三</li>
<li>王五</li>
<li>李四</li>

</ul>
</li>
<li>
<span>我的友</span>
<ul>
<li>張三</li>
<li>王五</li>

</ul>
</li>
</ul>
<script>
var oList = document.getElementById("list")
var oSpan = oList.getElementsByTagName("span")
var oUl = oList.getElementsByTagName("ul")


for (var i=0;i<oUl.length;i++) {
tab(i)
}

function tab(a){
var aLi = oUl[a].getElementsByTagName("li")

for (var i=0;i<aLi.length;i++) {
aLi[i].onclick = function(){
for (var i=0;i<aLi.length;i++) {
aLi[i].className = ""
}
this.className = "hover"
}
}
}



for (var i=0;i<oSpan.length;i++) {
oSpan[i].index = i
oSpan[i].onclick = function(){

for (var i=0;i<oSpan.length;i++) {
if(i!=this.index){
oSpan[i].className = ""
oUl[i].style.display = "none"
}
}


if(this.className==""){
this.className = "active"
oUl[this.index].style.display = "block"
}else{
this.className = ""
oUl[this.index].style.display = "none"
}


}
}



</script>
</body>
</html>

相關推薦

js經典練習題--qq好友列表

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}u

js經典練習題--一道

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}b

華為程式設計題(108)--cin>>hex>>a的用法

一.count函式 algorithm標頭檔案定義了一個count的函式,其功能類似於find。這個函式使用一對迭代器和一個值做引數,返回這個值出現次數的統計結果。 編寫程式讀取一系列in

C++筆記 經典問題解析---狄泰學院

如果在閱讀過程中發現有錯誤,望評論指正,希望大家一起學習,一起進步。 學習C++編譯環境:Linux 第五十五課 經典問題解析四 1.關於動態記憶體分配 new和malloc的區別是什麼? delete和free的區別是什麼? new關鍵字與malloc函式的區別 new關鍵

bugkuCTF平臺逆向題逆向入門題解

題目連結: tips: 雙擊無法執行 提示版本不對(win10) 查殼顯示不是有效的PE檔案 用WinHex開啟顯示 一看發現是圖片的base64編碼 可以這樣 <img src="data:image/png;base64,這裡放字元"/> 將文件

bugKuCTFreverse題目Timer(阿里CTF)writeup

題目截圖:解析:apk安裝之後出現一個讀秒的,20萬秒,大於3600,所以大於一個小時,所以太慢了,不等了。jeb反編譯,MainActivity程式碼:package net.bluelotus.tomorrow.easyandroid; import android.o

《Go 語言併發之》讀後感 -

# 約束 約束可以減輕開發者的認知負擔以便寫出有更小臨界區的併發程式碼。確保某一資訊再併發過程中僅能被其中之一的程序進行訪問。程式中通常存在兩種可能的約束:特定約束和詞法約束。 ## 特定約束 通過公約實現約束,無論是由語言社群、你所在的團隊,還是你的程式碼庫設定。在 Go 語言官方預設安裝 gofmt

【面向對象 次作業】次博客作業

步驟 描述 方式 博客作業 院校 進一步 ati 多線程 嚴重 測試與正確性論證 效果差異 測試是試圖通過使用一些特定的、或是隨機的輸入,並預測代碼的執行結果,來對結果進行檢查。 正確性論證則需要對代碼的行為進行進一步的抽象,並考慮每個代碼部分之間的關系是否正常,是否存在潛

JavaScript入門經典版)讀書筆記

utc 文件名 ttext 文檔 開頭 rep 顯示 部分 body 第一部分 Web腳本編寫與JavaScript語言的概念 1.document.lastModified() -> 返回文檔修改日期 2.<head>標簽中的<sc

C語言入門經典版).pdf

《C語言入門經典(第4版)》的目標是使你在C語言程式設計方面由一位初學者成為一位稱職的程式設計師。讀者基本不需要具備任何程式設計知識,即可通過《C語言入門經典(第4版)》從頭開始編寫自己的C程式。研讀《C語言入門經典(第4版)》,你就可以成為一位稱職的C語言程式設計師。從許多方面來說,C語言

簡單學完HTML+CSS+JS,現在開始看演算法(版)----歐幾里得演算法

歐幾里得演算法 package euclidean_algorithm; import java.util.Scanner; /** * @author ALazy_cat * 歐幾里得演算法的自然語言描述: * 計算兩個非負整數x和y的最大公約數: 若y = 0,則最大公約數為x;

天精通WCF——天 你一定要明白的通訊單元Message

轉眼你已經學了三天的wcf了,是不是很好奇wcf在傳輸層上面到底傳遞的是個什麼鳥毛東西呢???應該有人知道是soap,那soap這叼毛長得是什麼 樣呢?這一篇我們來揭開答案。。。 一:soap到底長成什麼樣子   為了能看清soap長的啥樣,我可以用強大的Fiddler來監

章:操作列表

clas str 3.3 轉換 一個 改變 導致 賦值 any 第四章:操作列表 4.1 遍歷整個列表 如果名單很長,將包含大量反復的代碼。另外,每當名單的長度發生變化時,都必須修改代碼。通過for 循環,可讓Python去處理這些問題 1)使用for循環來打印魔術師名

python天課程:列表(增,刪,改,查),元祖

''' #1.增加 append insert li = ['alex',[1,2,3],'wusir','egon','女神','taibai'] li.append('日天') print(li) li.append(1) print(li) while 1: name = input('請

Java經典編程題50之二十

args example for ava ati rgs oid string += 有5個人坐在一起,問第5個人多少歲,他說比第4個人大2歲。問第4個人歲數,他說比第3個人大2歲。 問第三個人,他說比第2人大兩歲。問第2個人, 說比第一個人大兩歲。最後問第一個人,他說是1

天(41題全解)

rom blog str case 循環 clas 同名 http name 41道題: 重要的 連表查詢 分組 制表語句: 班級表 Table: class Create Table: CREATE TABLE

【.NET Core專案實戰-統一認證平臺】章 閘器篇-資料庫儲存配置(2)

【.NET Core專案實戰-統一認證平臺】開篇及目錄索引 上篇文章我們介紹瞭如何擴充套件Ocelot閘道器,並實現資料庫儲存,然後測試了閘道器的路由功能,一切都是那麼順利,但是有一個問題未解決,就是如果閘道器配置資訊發生變更時如何生效?以及我使用其他資料庫儲存如何快速實現?本篇就這兩個問題展開講解,

45經典SQL題練習()

-- 31、查詢所有教師和同學的name、sex和birthday. SELECT TNAME AS '名字',TSEX AS SEX,TBIRTHDAY AS BIRTHDAY FROM TEACHER UNION SELECT SNAME AS '名字',SSEX AS SEX,SBIRTHD

Thinking in Java 版完整版 練習題 初始化與清理

Thinking in Java 第四版完整版 第五章練習題,記錄一下(jdk1.8.0) 1. /** * 練習1:建立一個類,它包含一個未初始化的String引用。驗證該引用被Java初始化成了null。 * @author admin11 * @date 2

《學習之章組塊的形成1,先把註意力集中

一個 拼接 拼圖 整體 理解 包含 如果 所在 情況   當你第一次遇到科學或數學中的全新概念時,往往不知其所雲,就像看見拼圖碎片一樣。   如果不理解含義,也不考慮其所在的背景,僅記憶一個事實,是不能幫你理清頭緒的,或者說,你仍不會明白一個概念是如何與其他已學的概念拼合在