javascript 时间代理 





 1 <button class="btn-active">按钮1</button>
 2     <button>按钮2</button>
 3     <button>按钮3</button>
 4     <button>按钮4</button>
 5     <div class="div-active">1</div>
 6     <div>2</div>
 7     <div>3</div>
 8     <div>4</div>
 9     <script type="text/javascript">
10     //1.先获取元素
11     var buttonList = document.getElementsByTagName("button");
12     var divList = document.getElementsByTagName("div");
13     //2.添加事件
14     for(var i = 0; i < buttonList.length; i++) {
15         (function(i){ //匿名函数自执行
16              buttonList[i].onclick = function() {
17                 for(var j = 0; j < buttonList.length;j++) {
18                     buttonList[j].className = "";
19                     divList[j].className = "";
20                 }
21                 this.className = "btn-active";
22                 divList[i].className = "div-active";
23             }
24         })(i)
25     }
26     </script>








 1 <button class="btn-active">按钮1</button>
 2     <button>按钮2</button>
 3     <button>按钮3</button>
 4     <button>按钮4</button>
 5     <div class="div-active">1</div>
 6     <div>2</div>
 7     <div>3</div>
 8     <div>4</div>
 9     <script type="text/javascript">
10     //1.先获取元素
11     var buttonList = document.getElementsByTagName("button");
12     var divList = document.getElementsByTagName("div");
13     //2.添加事件
14     for(var i = 0; i < buttonList.length; i++) {
15         buttonList[i].index = i;
16         buttonList[i].onclick = function() {
17             for(var j = 0; j < buttonList.length;j++) {
18                 buttonList[j].className = "";
19                 divList[j].className = "";
20             }
21             this.className = "btn-active";
22             divList[this.index].className = "div-active";
23         }
24     }
25     </script>






 1 <button style="background-color: yellow;">1</button>
 2     <button>2</button>
 3     <button>3</button>
 4     <button>4</button>
 5     <div style="display:block;">1</div>
 6     <div>2</div>
 7     <div>3</div>
 8     <div>4</div>
 9     <script type="text/javascript">
10     var buttonArr = document.getElementsByTagName("button");
11     var divArr = document.getElementsByTagName("div");
12     for(var i = 0; i < buttonArr.length;i++) {
13         buttonArr[i].index = i;
14         // buttonArr[i].setAttribute("index",i);
15         buttonArr[i].onclick = function() {
16             for(var j = 0; j < buttonArr.length; j++) {
17                 buttonArr[j].style.backgroundColor = "#ccc";
18                 buttonArr[this.index].style.backgroundColor = "yellow";
19                 divArr[j].style.display = "none";
20                 divArr[this.index].style.display = "block";
21             }
22         }
23     }
24     
25     </script>






 1 <button style="background-color: yellow;">1</button>
 2     <button>2</button>
 3     <button>3</button>
 4     <button>4</button>
 5     <div style="display:block;">1</div>
 6     <div>2</div>
 7     <div>3</div>
 8     <div>4</div>
 9     <script type="text/javascript">
10     //定义数组并获取数组内各个的节点
11     var buttonArr = document.getElementsByTagName("button");
12     var divArr = document.getElementsByTagName("div");
13     for(var i = 0; i < buttonArr.length;i++) {
14         buttonArr[i].onclick = function() {
15             //this 
16             // alert(this.innerHTML)
17            //for循环遍历button数组长度
18             for(var j = 0; j < buttonArr.length; j++) {
19                 //重置所有的button样式
20                 buttonArr[j].style.backgroundColor = "#ccc";
21                 //给当前的(点击的那个)那个button添加样式
22                 this.style.backgroundColor = "yellow";
23                 //隐藏所有的div
24                 divArr[j].style.display = "none";
25                 //判断当前点击是按钮数组中的哪一个？
26                 if(this == buttonArr[j]) {
27                     // alert(j);
28                      //显示点击按钮对应的div
29                     divArr[j].style.display = "block";
30                 }
31             }
32         }
33     }
34     </script>






 




 1 <ul id="ul1">
 2      <li class="active">111</li>
 3      <li>222</li>
 4      <li>333</li>
 5      <li>444</li>
 6    
 7  </ul>
 8 <script>
 9     window.onload = function (){
10         var ul1 = document.getElementById('ul1');
11         var oli = ul1.getElementsByTagName('li');
12          
13         ul1.onclick = function (e){
14            var e = e || window.event;
15              var target = e.target || e.srcElement;
16             for(var i = 0;i<oli.length;i++){
17                oli[i].className = '';
18            }
19              // e.target目标li
20             target.className = 'active';
21         };
22     };
23 </script>




 






            

            
posted @ 
2016-03-14 18:56 
前端爱好者 
阅读(528) 
评论(0) 
 
收藏 
举报