<!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; 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>