一个简单问题求解答

用js做个点击图片效果，下面的     abox[this.index].className="show"
         this.className="cor"没效果，看了半天哪里错了啊？.<html>
<head>
<style type="text/css">
    #box{width:500px;height:470px;
     background-color:yellow;
     margin:auto;
     
    }
   input{width:140px;background-color:white}
   img{width:500px;height:450px;}
   .right{position:absolute;right:260px}
   #box div{display:none}
   #box .show{display:block}
   #box .cor{background-color:red}
   
</style>
<head><body>
    <div id="box">
    <a href="#">左</a>
    <a href="#"class="right">右</a>
    <input type="button" value="1"></input>
    <input type="button" value="2"></input>
    <input type="button" value="3"></input>
    <div class="show"><img src="img/1.jpg"></img></div>
    <div><img src="img/2.jpg"></div>
    <div><img src="img/3.jpg"></div>
    </div>
 
    <script>
    var abtn=document.getElementsByTagName("button")
    var adiv=document.getElementById("box")
    var abox=adiv.getElementsByTagName("div")
    
    for(i=0;i<abtn.length;i++){
      abtn[i].index=i
      
      
    abtn[i].onclick=function (){  abtn[i].onclick=function (){
          
           for(j=0;j<abtn.length;j++){
              abton[i].className=""
              abox[i].className=""
           }
         
         abox[this.index].className="show"
         this.className="cor"
         
         }
          
    }
    
    </script>
</body>
</style>
</html>
          
   

解决方案 »

  1.   

    abton[i].className=""
    abox[i].className=""你这块这个abton是啥   这个不是你定义的变量吧
      

  2.   

    应该是abtn,按钮的变量，删除后还是不行
      

  3.   

    <html><head>
        <style type="text/css">
            #box {
                width: 500px;
                height: 470px;
                background-color: yellow;
                margin: auto;        }        button {
                width: 140px;
                background-color: white
            }        img {
                width: 500px;
                height: 450px;
            }        .right {
                position: absolute;
                right: 260px
            }        #box div {
                display: none
            }        #box .show {
                display: block
            }        #box .cor {
                background-color: red
            }
        </style>    <head>    <body>
            <div id="box">
                <a href="#">左</a>
                <a href="#" class="right">右</a>
                <button value="1" >1</button>
                <button value="2" >2</button>
                <button value="3" >3</button>
                <div class="show"><img src="./1-1.png"></img></div>
                <div><img src="./1-2.png"></div>
                <div><img src="./1-3.png"></div>
            </div>        <script>
                var abtn = document.getElementsByTagName("button")
                var adiv = document.getElementById("box")
                var abox = adiv.getElementsByTagName("div")            for (i = 0; i < abtn.length; i++) {
                    abtn[i].index = i
                    abtn[i].onclick = function () {
                        for (j = 0; j < abtn.length; j++) {
                            abtn[j].className = "";
                            abox[j].className = "";
                        }
                        abox[this.index].className = "show"
                        this.className = "cor"                }            }
            </script>
        </body>
        </style></html>
    有很多个问题，首先button需要这样写<button value="1" >1</button>，不然找不到对应节点
    click事件里面的for循环中，索引不要用i，i是第一个for循环的变量，和click事件是异步执行的
    abton变量名写错了，应该是abtn