當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript：改变li前缀图片和样式
生活随笔
收集整理的這篇文章主要介紹了
JavaScript：改变li前缀图片和样式
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title><style>
.listyle1 {background: url(images/col_23.jpg) no-repeat left;
}
.listyle2 {background: url(images/col_11.jpg) no-repeat left;
}
.a1 {color: blue;padding-left:20px;
}
.a2 {color: red;padding-left:20px;
}
</style>
<script>
//函數(shù)功能：點(diǎn)擊li，改變li的前綴圖標(biāo)和li的樣式
//5個(gè)參數(shù)
//name:要點(diǎn)擊的元素id
//cursel:當(dāng)前點(diǎn)擊的元素
//n:所有可以點(diǎn)擊的元素?cái)?shù)
//cla1:前綴圖標(biāo)樣式
//cla2:超鏈接樣式
//ul:下級(jí)列表
function setTab(name, cursel, n, cla1,cla2) {for (i = 1; i <= n; i++) {var prepic = document.getElementById(name + i);prepic.className = i == cursel ? cla1 : "listyle1";var aa = document.getElementById("a_" + name + "_" + i);aa.className = i == cursel ? cla2 : "a1";}
}
</script>
</head><body>
<ul style="list-style:none; line-height:30px; width:300px"><li id="li1" class="listyle1" onClick="setTab('li',1,10,'listyle2','a2')"><a id="a_li_1" href="#" class="a1">學(xué)前教育</a></li> <li id="li2" class="listyle1" onClick="setTab('li',2,10,'listyle2','a2')"><a id="a_li_2" href="#" class="a1">義務(wù)教育</a></li><li id="li3" class="listyle1" onClick="setTab('li',3,10,'listyle2','a2')"><a id="a_li_3" href="#" class="a1">高中教育</a></li><li id="li4" class="listyle1" onClick="setTab('li',4,10,'listyle2','a2')"><a id="a_li_4" href="#" class="a1">學(xué)前教育</a></li><li id="li5" class="listyle1" onClick="setTab('li',5,10,'listyle2','a2')"><a id="a_li_5" href="#" class="a1">義務(wù)教育</a></li><li id="li6" class="listyle1" onClick="setTab('li',6,10,'listyle2','a2')"><a id="a_li_6" href="#" class="a1">高中教育</a></li><li id="li7" class="listyle1" onClick="setTab('li',7,10,'listyle2','a2')"><a id="a_li_7" href="#" class="a1">學(xué)前教育</a></li><li id="li8" class="listyle1" onClick="setTab('li',8,10,'listyle2','a2')"><a id="a_li_8" href="#" class="a1">義務(wù)教育</a></li><li id="li9" class="listyle1" onClick="setTab('li',9,10,'listyle2','a2')"><a id="a_li_9" href="#" class="a1">高中教育</a></li><li id="li10" class="listyle1" onClick="setTab('li',10,10,'listyle2','a2')"><a id="a_li_10" href="#" class="a1">高中教育</a></li></ul></body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/cag2050/p/5049223.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript：改变li前缀图片和样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： iOS方法类：CGAffineTrans
- 下一篇： gradle idea java ssm