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>

posted on 2015-12-31 10:15 土dou 阅读(303) 评论(0) 编辑收藏举报