摘要:实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!

代码:给事件加属性标记,结合数组实现

 <!DOCTYPE html>   <html lang="en">       <head>           <meta charset="utf-8">           <style type="text/css">           *{padding: 0;margin: 0;}           .box{               width: 300px;               height: 30px;               margin:50px auto;           }           span{               display:inline-block;               width: 50px;height: 30px;               background-color: #f0c;               color:#fff;               text-align: center;               line-height: 30px;           }           </style>       </head>       <body>       <!--实现效果:点击某一个元素的时候让其改变样式,其他的恢复之前的样式-->              <p class="box">              <span>内容1</span>              <span>内容2</span>              <span>内容3</span>              <span>内容4</span>              <span>内容5</span>           </p>           <script type="text/javascript">                /*                * 给每一个元素添加一个属性index.记下当前是第几个元素                * 结合数组加上标志位,                * 如果点击了就将对应的flag数组的值变为1                * 此刻点击的的时候,1有可能是之前点击过的,如果是之前点击的则j!=this.index                *                   2如果是此刻点击的,则j==this.index                               */               var spans=document.getElementsByTagName('span');               var flag=[0,0,0,0,0];               for(var i=0;i<spans.length;i++){                   spans[i].index=i;                   spans[i].onclick=function(){                                              flag[this.index]=1;                       for(var j=0;j<flag.length;j++){                           //判断是否点击过,并且是不是现在点击的这个元素                           if(j==this.index && flag[j]==1){                               spans[j].style.backgroundColor='#909'                           }else if(flag[j]==1&&j!=this.index){                               //之前已经点击过,但是不是现在点击的元素                               spans[j].style.backgroundColor='#f0c'                           }                       }                   }                          }              </script>       </body>   </html>  

实现效果:列如:当前有五个元素,当点击其中一个元素的时候只改变当前的样式,其他元素恢复之前的样式;

总结了三种实现的方法:加深自己的理解,有错误望指正!万分感谢!

代码:给事件加属性标记,结合数组实现

 <!DOCTYPE html>   <html lang="en">       <head>           <meta charset="utf-8">           <style type="text/css">           *{padding: 0;margin: 0;}           .box{               width: 300px;               height: 30px;               margin:50px auto;           }           span{               display:inline-block;               width: 50px;height: 30px;               background-color: #f0c;               color:#fff;               text-align: center;               line-height: 30px;           }           </style>       </head>       <body>       <!--实现效果:点击某一个元素的时候让其改变样式,其他的恢复之前的样式-->              <p class="box">              <span>内容1</span>              <span>内容2</span>              <span>内容3</span>              <span>内容4</span>              <span>内容5</span>           </p>           <script type="text/javascript">                /*                * 给每一个元素添加一个属性index.记下当前是第几个元素                * 结合数组加上标志位,                * 如果点击了就将对应的flag数组的值变为1                * 此刻点击的的时候,1有可能是之前点击过的,如果是之前点击的则j!=this.index                *                   2如果是此刻点击的,则j==this.index                               */               var spans=document.getElementsByTagName('span');               var flag=[0,0,0,0,0];               for(var i=0;i<spans.length;i++){                   spans[i].index=i;                   spans[i].onclick=function(){                                              flag[this.index]=1;                       for(var j=0;j<flag.length;j++){                           //判断是否点击过,并且是不是现在点击的这个元素                           if(j==this.index && flag[j]==1){                               spans[j].style.backgroundColor='#909'                           }else if(flag[j]==1&&j!=this.index){                               //之前已经点击过,但是不是现在点击的元素                               spans[j].style.backgroundColor='#f0c'                           }                       }                   }                          }              </script>       </body>   </html>  

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1632.html