进阶任务10（主线任务）：事件的应用

题目1：实现如下图Tab切换的功能

Tab切换效果

    <style>
        ul,li{
            margin:0;
            padding:0;
        }
        li{
            list-style:none;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
        .tab{
            width:600px;
            margin:20px auto;
            border:1px dashed #ccc;
            padding:20px 10px;
            border-radius:5px;
        }   
        .tab-header{
            border-bottom:1px solid #ccc;
        }
        .tab-header>li{
            float:left;
            color:#cfcfcf;
            border-top:1px solid #fff;
            border-left:1px solid #fff;
            border-right:1px solid #fff;
            padding:10px 20px;
            cursor:pointer;
        }
        .tab-header .active{
            border:1px solid #ccc;
            border-bottom:#fff;
            border-radius:5px 5px 0  0;
            color:#333;
            background:#c3c3ce;
            margin-bottom:-1px;
        }
        .tab-container{
            padding:20px 10px;

        }
        .tab-container>li{
            display:none;
        }
        .tab-container>.active{
            display:block;
        }
        .box{
            height:1000px;
        }
    </style>
</head>
<body>
<div class="tab">
    <ul class="tab-header clearfix">
        <li class="active">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
    </ul>
    <ul class="tab-container">
        <li class="active">内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
</div>
<div class="box"></div>
<script>
    var tabHeader=document.querySelector('.tab-header'),
            tabLis=document.querySelectorAll('.tab-header>li'),
            tabPanels=document.querySelectorAll('.tab-container>li');

    tabHeader.addEventListener('click',function(e){
        var clickNode=e.target;
        if(clickNode.tagName.toLowerCase()==='li'){
            for(var i=0;i<tabLis.length;i++){
                tabLis[i].classList.remove('active');
            }
            clickNode.classList.add('active');

            var index=[].indexOf.call(tabLis,clickNode);
            console.log(index);

            for(var i=0;i<tabPanels.length;i++){
                tabPanels[i].classList.remove('active');
            }
            tabPanels[index].classList.add('active');
        }
    })
</script>

题目2：实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏

模态框

<div class="btn-group">
    <button id="btn-modal">点我</button>
</div>
<div id="modal-1" class="modal-dialog">
    <div class="cover"></div>
    <div class="modal-ct">
        <div class="header">
            <h3>标题</h3>
            <a class="close" href="#">x</a>
        </div>
        <div class="content">
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
        </div>
        <div class="footer">
            <a class="btn btn-confirm" href="#">确定</a>
            <a class="btn btn-cancel" href="#">取消</a>
        </div>
    </div>
</div>

<script>

var btn=document.querySelector('#btn-modal'),
        modal=document.querySelector('#modal-1'),
        modalCt=document.querySelector('#modal-1 .modal-ct');


btn.addEventListener('click',function(e){
    e.stopPropagation();
    showModal(modal);
});

modalCt.addEventListener('click',function(e){
    e.stopPropagation();
    if(hasClass(e.target,'close')||hasClass(e.target,'btn-cancel')){
        hideModal(modal);
    }
});

document.body.addEventListener('click',function(){
    hideModal(modal);
});

function showModal(modal){
    modal.style.display='block';
}
function hideModal(modal){
    modal.style.display="none";
}
function hasClass(ele,cls){
    return !!ele.className.match(new RegExp('\\b'+cls+'\\b'));
}

进阶任务10（主线任务）：事件的应用

推荐阅读更多精彩内容