点击此块颜色变化,其他块恢复颜色的原生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>