點擊此塊顏色變化，其他塊恢復顏色的原生js代碼

<script>
    window.onload=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.onload=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>