你的位置:首页 > Java教程

[Java教程]JavaScript:改变li前缀图片和样式


<!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>无标题文档</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>//函数功能:点击li,改变li的前缀图标和li的样式//5个参数//name:要点击的元素id//cursel:当前点击的元素//n:所有可以点击的元素数//cla1:前缀图标样式//cla2:超链接样式//ul:下级列表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">学前教育</a></li>   <li id="li2" class="listyle1" onClick="setTab('li',2,10,'listyle2','a2')"><a id="a_li_2" href="#" class="a1">义务教育</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">学前教育</a></li> <li id="li5" class="listyle1" onClick="setTab('li',5,10,'listyle2','a2')"><a id="a_li_5" href="#" class="a1">义务教育</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">学前教育</a></li> <li id="li8" class="listyle1" onClick="setTab('li',8,10,'listyle2','a2')"><a id="a_li_8" href="#" class="a1">义务教育</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>