js五道經典練習題--第四道qq好友列表
阿新 • • 發佈：2019-01-19
<!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>
<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>