版本迭代说明

• v1.0
  • 功能：实现tab页切换，根据tab标签筛选展示子项
  • 页面：实现基本的自适应页面设计
  • 待优化：
    • 木用动效，感官简单且简陋；
    • 子项展示没有使用懒加载功能，或者分页功能； 先看成品图

实现的技术思路

1. 页面：

• 利用flex进行自适应布局
• tab的页面效果用下边框制作
• 还是动态遍历tab页子节点绑定点击事件（感觉很低效阿）

2. 功能：

• 在tab键上封装bindEvent()，动态绑定显示事件；
• 封装筛选函数 selectTabArray(courseArray,tabType)，可筛选特定类型
• 封装动态生成拼接html子项函数 createCourseDom(selectTabArray)

遇到的细节

老是拼接好挫，待优化（当然本来我就很挫）

附录：代码

页面

<div class="course">
    <h2>课程安排</h2>
    <div class="course__tab">
        <ul>
            <li class="tab__all active" id="all">全部</li>
            <li class="tab__html " id="html">HTML</li>
            <li class="tab__css " id="css">CSS</li>
            <li class="tab__js " id="js">JavaScript</li>
        </ul>
    </div>
    <ul>
    <!--这里展示子项-->
    </ul>
</div>

封装函数

//数据结构如下
//随便写了个构造函数凑合凑合数据
let course10=new createCourse("imgUrl","第十课 大神","这里是课程概要110",["html","css","js"]);
let courseArray=new Array(course10);
bindEvent();

function createCourse(img,title,detils,tag){
    //let newCourse=new Object;
    this.Img=img;
    this.Title=title;
    this.Detils=detils;
    //注意tag是个数组
    this.Tag=tag;
}

function bindEvent(){
    document.querySelector('.course>ul').innerHTML=createCourseDom(courseArray)
    let domarray=document.querySelectorAll('.course__tab li');
    for(let i=0;i<domarray.length;i++){
        domarray[i].onclick=function(){
            document.querySelector('.course__tab .active').classList.remove('active');
            domarray[i].classList.add('active');
            let selectedArray=selectTabArray(courseArray,domarray[i].id);
            document.querySelector('.course>ul').innerHTML=createCourseDom(selectedArray);
        }
    }
}
function selectTabArray(courseArray,tabType){
    let selectArray=new Array;
    courseArray.forEach(e=>{
        if(e.Tag.indexOf(tabType)>-1){
            selectArray.push(e);
        }
    })
    if(tabType=="all"){ return courseArray;}
    return selectArray;
}
function createCourseDom(selectTabArray){
    let domChild=``
    selectTabArray.forEach(e => {
        let tagHtml=``;
        e.Tag.forEach(e=>{
            tagHtml+=`<span class="label__${e}">${e}</span>`
        });
        domChild+=`<li><img src="../\src/\img/\slogan_img.jpg" alt="">
                        <div class="course__details">
                        <h3>${e.Title}</h3>
                        <div class="details__content">${e.Detils}</div>
                        <div class="details__label">${tagHtml}</div>
                        </div>
                    </li>`
    });
    return domChild;
}