javascript 时间代理

 <button class="btn-active">按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
     <button>按钮4</button>
     <div class="div-active">1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <script type="text/javascript">
     //1.先获取元素
     var buttonList = document.getElementsByTagName("button");
     var divList = document.getElementsByTagName("div");
     //2.添加事件
     for(var i = 0; i < buttonList.length; i++) {
         (function(i){ //匿名函数自执行
              buttonList[i].onclick = function() {
                 for(var j = 0; j < buttonList.length;j++) {
                     buttonList[j].className = "";
                     divList[j].className = "";
                 }
                 this.className = "btn-active";
                 divList[i].className = "div-active";
             }
         })(i)
     }
     </script>

 <button class="btn-active">按钮1</button>
     <button>按钮2</button>
     <button>按钮3</button>
     <button>按钮4</button>
     <div class="div-active">1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <script type="text/javascript">
     //1.先获取元素
     var buttonList = document.getElementsByTagName("button");
     var divList = document.getElementsByTagName("div");
     //2.添加事件
     for(var i = 0; i < buttonList.length; i++) {
         buttonList[i].index = i;
         buttonList[i].onclick = function() {
             for(var j = 0; j < buttonList.length;j++) {
                 buttonList[j].className = "";
                 divList[j].className = "";
             }
             this.className = "btn-active";
             divList[this.index].className = "div-active";
         }
     }
     </script>

 <button style="background-color: yellow;">1</button>
     <button>2</button>
     <button>3</button>
     <button>4</button>
     <div style="display:block;">1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <script type="text/javascript">
     var buttonArr = document.getElementsByTagName("button");
     var divArr = document.getElementsByTagName("div");
     for(var i = 0; i < buttonArr.length;i++) {
         buttonArr[i].index = i;
         // buttonArr[i].setAttribute("index",i);
         buttonArr[i].onclick = function() {
             for(var j = 0; j < buttonArr.length; j++) {
                 buttonArr[j].style.backgroundColor = "#ccc";
                 buttonArr[this.index].style.backgroundColor = "yellow";
                 divArr[j].style.display = "none";
                 divArr[this.index].style.display = "block";
             }
         }
     }

     </script>

 <button style="background-color: yellow;">1</button>
     <button>2</button>
     <button>3</button>
     <button>4</button>
     <div style="display:block;">1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <script type="text/javascript">
     //定义数组并获取数组内各个的节点
     var buttonArr = document.getElementsByTagName("button");
     var divArr = document.getElementsByTagName("div");
     for(var i = 0; i < buttonArr.length;i++) {
         buttonArr[i].onclick = function() {
             //this
             // alert(this.innerHTML)
            //for循环遍历button数组长度
             for(var j = 0; j < buttonArr.length; j++) {
                 //重置所有的button样式
                 buttonArr[j].style.backgroundColor = "#ccc";
                 //给当前的(点击的那个)那个button添加样式
                 this.style.backgroundColor = "yellow";
                 //隐藏所有的div
                 divArr[j].style.display = "none";
                 //判断当前点击是按钮数组中的哪一个？
                 if(this == buttonArr[j]) {
                     // alert(j);
                      //显示点击按钮对应的div
                     divArr[j].style.display = "block";
                 }
             }
         }
     }
     </script>

 <ul id="ul1">
      <li class="active">111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
    
  </ul>
 <script>
     window.onload = function (){
         var ul1 = document.getElementById('ul1');
         var oli = ul1.getElementsByTagName('li');
          
         ul1.onclick = function (e){
            var e = e || window.event;
              var target = e.target || e.srcElement;
             for(var i = 0;i<oli.length;i++){
                oli[i].className = '';
            }
              // e.target目标li
             target.className = 'active';
         };
     };
 </script>