事件和简单选项卡制作

一。事件

        1.事件：

                  组成：

                  （1）触发谁的事件：事件源

                  （2）触发的什么事件：事件类型

                  （3）触发以后做什么：事件处理函数

                  当我们想让元素做什么，就主要写在事件处理函数中

         2.事件的绑定

                方式1： 以上这种方式进行事件绑定时，后面的会覆盖掉前面的，故最终单击元素时只会打印出div2

box1.onclick=function(){
       console.log("div1")
      }
     box1.onclick=function(){
      console.log("div2")
       }

       方式2：addEventListener()事件监听函数：可以绑定多事件函数，依次执行

                        此种方式可以给事件绑定多个事件处理函数，且不会被覆盖，依次执行

box2.addEventListener("click",function(){
            console.log("box2_1")
         })
         box2.addEventListener("click",function(){
             console.log("box2_2")
         })

        兼容性问题解决：主要是解决低版本ie浏览器的兼容性问题，但此方法ie11已经不支持了，此种绑定函数还需要在事件前面加上on，但使用addEventListener时已经不需要这样做了

box2.attachEvent("onclick",function(){
             console.log("兼容性")
         })

二.选项卡制作

        1.css样式部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            display: flex;
        }
        li{
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: red;
            margin-left: 5px;
        }
        .active{
            background-color: brown;
        }
        main{
            color: white;
        }
        main div{
            width: 380px;
            height: 100px;
            display: none;
        }
        main div:first-child{
            background-color: green;
        }
        main div:nth-child(2){
            background-color: yellowgreen;
        }
        main div:nth-child(3){
            background-color: beige;
        }
        .active_div{
            display: block;
        }
    </style>

        2.html部分

<nav>
        <ul>
            <li class="active">Home</li>
            <li>About</li>
            <li>Login</li>
        </ul>
        <main>
            <div class="active_div">heme</div>
            <div index="1">About</div>
            <div>Login</div>
        </main>
    </nav>

        3.javascript部分

<script>
        var list = document.querySelectorAll("nav ul li")
        var divs = document.querySelectorAll("main div")
        //循环给每一个li标签绑定单击事件
        for(var i=0;i<list.length;i++){
            list[i].dataset.index=i //给每一个li添加一个自定义属性data—index
            list[i].onclick=function(){
                //编写该事件要处理的功能

                //先将所有li上面的active删掉
                for(var m=0;m<list.length;m++){
                    list[m].classList.remove("active")
                    divs[m].classList.remove("active_div")
                }
                //将active添加到当前点击的li上
                this.classList.add("active")
                //获取当前点击的元素上的自定义属性data-index的值
                var index=this.dataset.index
                console.log(index);
                divs[index].classList.add("active_div")
            }
        }
    </script>