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>