初学，求一段JS源码！急!

document.getElementById("xxx").src="xxx";

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="div" style="background:url(这里面写图片地址)"></div>
    <input id="btn" type="button" value="click me" />
    <script>
document.getElementById('btn').onclick = function(){
document.getElementById('div').style.backgroundImage = 'url(这里面写要改变的图的地址)';
};
    </script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
ul li{float:left; width:100px; height:100px; border:1px solid #000; margin-right:2px; display:inline;}
</style>
</head><body>
<ul>
     <li></li>
        <li></li>
        <li></li>
    </ul>
    <input id="btn" type="button" value="click me" />
    <script>
        document.getElementById('btn').onclick = function(){
var lis = document.getElementsByTagName('li'),
len = lis.length;

for(var i = 0; i < len; i++){
!function(i){
lis[i].onclick = function(){
switch(i){
case 0:
//第一个li背景
this.style.backgroundImage = 'url(这里面写要改变的图的地址)';
break;
case 1:
//第二个li背景
this.style.backgroundImage = 'url(这里面写要改变的图的地址)';
break;
case 2:
//第三个li背景
this.style.backgroundImage = 'url(这里面写要改变的图的地址)';
break;
}
};
}(i)
}
        };
    </script>
</body>
</html>

我想要的是这样，<Ul><LI><a href="#">连接一</a></li> <LI><a href="#">连接二</a></li> <LI><a href="#">连接三</a></li></ul>
li标签有背景图1，当我点击过连接后可以吧li标签的背景图变成背景图2.麻烦你

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
ul li{float:left; width:100px; height:100px; border:1px solid #000; margin-right:2px; display:inline;}
</style>
</head><body>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <script>
            var a = document.getElementsByTagName('a'),
            len = a.length;

            for(var i = 0; i < len; i++){
                !function(i){
                    a[i].onclick = function(){
                        switch(i){
                            case 0:
                                //第一个li背景
                                this.parentNode.style.backgroundImage = 'url(这里面写要改变的图的地址)';
                                break;
                            case 1:
                                //第二个li背景
                                this.parentNode.style.backgroundImage = 'url(这里面写要改变的图的地址)';
                                break;
                            case 2:
                                //第三个li背景
                                this.parentNode.style.backgroundImage = 'url(这里面写要改变的图的地址)';
                                break;
                        }
                    };
                }(i)
            }
    </script>
</body>
</html>

用闭包来做吧
<html>
<head>
<style>
*{margin:0; padding:0;}
ul{list-style:none;}
ul li{
float:left;
width:100px;
height:20px;
border:1px solid #000;
margin-right:2px;
display:inline;
background-image:url(2_mubeibei.jpg);
}
</style>
<script>

</script>
</head>
<body>
<ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
<script>
var listObj = document.getElementsByTagName("li");
function bindEvent(nob){
this.clickFunc = function() {
listObj[nob].style.background = '2_fanchuanzhidu.jpg';
}
}
for(var i=0;i<listObj.length;i++){
var col = new bindEvent(i);
listObj[i].onclick = col.clickFunc;
}
</script>
</body>
</html>

调试易

初学，求一段JS源码！急!

解决方案 »