点击此块颜色变化，其他块恢复颜色的原生js代码

<script>
    window.οnlοad=function (){
        var pic=document.getElementById("pic")
        var order=document.getElementsByClassName("order");
        var orderLi=$(".order li");//这个是用jquery获取的，
        for(i=0;i<orderLi.length;i++) {//遍历处理，对于每个块都有onclick函数
       
              orderLi[i].onclick = function () {
                    for(i=0;i<orderLi.length;i++){//在点击事件中再加载一个遍历，当点击事件触发时，先让其他元素的颜色保持不变
                        orderLi[i].style="background-color:aliceblue";
                    }
                    this.style="background-color:red";//为什么要用this，而不是orderLi[i]，要点击的事件块发生颜色变化，同时上一步使得其他的块颜色保持不变，这就让上一次点击变化
//的颜色恢复到原来的颜色
                }
            
        }
    }
</script>

　　js处理点击其中一块，仅仅这一块颜色发生变化的原生js原理：

1，遍历，给每一个块添加一个onclick点击事件

2，点击之后，我们要做什么？（1）：给点击的块添加颜色

（2），其他的块恢复颜色;::;;;,再添加一个遍历，给所有的元素恢复到原来，恢复后，后面添加对点击的块一个background

 ，，点击按钮，翻页的原生js代码

<script>
    window.οnlοad=function (){
        var pic=document.getElementById("pic")
        var order=document.getElementsByClassName("order");
        var orderLi=$(".order li");
            for(i=0;i<orderLi.length;i++){
                orderLi[i].index=i; //将i赋给orderLi[i]的index属性
                orderLi[i].onclick = function () {

                    for(i=0;i<orderLi.length;i++){
                        orderLi[i].style="background-color:aliceblue";
                    }
                    this.style="background-color:red";//为什么要用this，而不是orderLi[i]
                    pic.style.top=(-100)*this.index+"px"; //调用this的index
                }
            }
    }
</script>

　　

转载于:https://www.cnblogs.com/qianduangaoshou/p/6504599.html