百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

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动画不是本课程重点,因此只能简述原理,感兴趣的小伙伴可以去汇智网找相应的课程学习

参照sidebar_filter的点击事件,为sidebar_hotel绑定点击事件。
sidebar_hotel.onclick = function () { list.style.display = 'none'; sidebar_hotel.className = 'select'; sidebar_filter.className = ''; hotel.style.display = 'block'; };