排他，换肤，全选，tab栏，自定义属性案例

1.排他思想

虽然i是全局变量，但第二个i是定义在函数体内的，作用域只在函数内

this是函数的调用者

2.百度换肤

3.两个新的事件：鼠标经过，鼠标离开

4.全选取消全选

this.checked属性值代表选中的状态

每次点击默认全选，然后只要有一个没选中，flag设为false

5.自定义属性添加和获取

设置属性值和移除，注意class

6.tab栏切换

最重要的是要给每一个li一个序号，这样就可以通过序号一一对应，点击谁，下面就显示谁

    <script>
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }

7.自定义属性

一般自定义属性写成data开头的，用getAttribute获取最好