js实现

这一节我们将实现菜单栏的tab切换效果。

1、js实现tab切换

通过用js对筛选条件、酒店列表两个选项所在div绑定点击事件，点击后将本选项对应的内容显示，将另外一个选项对应div隐藏 对应代码如下

sidebar_filter.onclick = function () {
    list.style.display = 'block';
    sidebar_filter.className = 'select';
    sidebar_hotel.className = '';
    hotel.style.display = 'none';
};
sidebar_hotel.onclick = function () {
    list.style.display = 'none';
    sidebar_hotel.className = 'select';
    sidebar_filter.className = '';
    hotel.style.display = 'block';
};

2、js点击展开选项栏

原理相同，只是我们这次使用for循环对span的点击事件进行绑定，并为每个选项加入clicked属性，标记是否已经展开，如果已经展开再点击则收起。

for(var i=0;i<list_li.length;i++){
    list_li[i].clicked = false;
    list_li[i].onclick = function(){
        var div = this.getElementsByTagName('div');
        if(this.clicked){
            div[0].style.display = 'none';
            this.clicked = false;
        }
        else{
            div[0].style.display = 'block';
            this.clicked = true;
        }
    }
}

同样js动画不是本课程重点，因此只能简述原理，感兴趣的小伙伴可以去汇智网找相应的课程学习