模仿完成选项卡(必须用模块)

通过3月29日的学习,了解了模块化式编程,按老师的讲解,模仿完成了以下选项卡代码:

html页代码

    <div class="box">
        <!-- 栏目 -->
        <div class="type" style="display: flex;"></div>
        <!-- 内容 -->
        <div class="content"></div>
    </div>

  <script type="module">
        // tabs就是一个对象,把导入的成员作为它的属性,全部挂到它上面
        // tabs相当于命名空间
        import * as tabs from './tabs.js'
        //获取栏目元素
        const type = document.querySelector('.type')
        const content = document.querySelector('.content')
        //页面加载成功就自动渲染出来
        window.onload = tabs.createTab(type,content)  //保证页面自动渲染
        //利用'事件代理'将每个按钮的点击全部委托给div.type来实现
            type.onclick = ev=>{
                //1. 设置栏目高亮
                tabs.setBtnStatus(ev)
                //2. 激活与当前栏目对应的新闻列表
                tabs.setContentStatus(ev,ev.target)
            }
    </script>

选项卡模块

(1). 选项卡

const cates = [
    { cid:1, cname:'中国新闻' },
    { cid:2, cname:'世界新闻' },
    { cid:3, cname:'本地新闻' },
]

(2). 其他js

// 3. 创建栏目和栏目
function createTab(type,content){
    //1. 生成栏目
      for(let i=0;i<cates.length;i++){
        // 生成按钮元素
        const btn = document.createElement('button')
        btn.textContent = cates[i].cname   //为按钮赋值
        //第一个按钮高亮显示
        //为每个按钮添加自定义属性
        btn.dataset.key = cates[i].cid
        if(i==0){
            //当索引为0的时候为其添加class
            btn.classList.add('active')
        }
        type.append(btn)  //将按钮添加到type元素中
      }
    //2. 生成内容
       for(let i=0;i<details.length;i++){
        //创建ul
        let ul = document.createElement('ul')
         //为每个ul添加自定义属性
         ul.dataset.key = details[i].cid
         // 全部内容加载时,默认全隐藏,只需显示第一组即可
        //  ul.classList.add('hidden')
        //  if(i==0){
        //     ul.classList.replace('hidden','block')
        //  }
         ul.classList.add(i==0?'active':'hidden')
        //循环,将与列表对应的内容渲染出来
         for(let j=0;j<details[i].content.length;j++){
            //给ul添加li
            let a = document.createElement('a')
            a.textContent = details[i].content[j].title
            a.href = details[i].content[j].url
            a.target ='_blank'
           let li = document.createElement('li')
             //给li赋值
            // li.textContent = details[i].content[j].title
            //append:父元素调用(追加)
            //textContent:当前元素,包括js,css 等隐藏内容html代码
            li.append(a)
            ul.append(li)
            content.append(ul)
         }
        //  ul.append(li)
       }
}
// 4. 自动设置栏目高亮
function setBtnStatus(ev){
    //1. 去掉所有按钮的激活样式
    // 遍历类数组(...变成真数组):forEach
    ;[...ev.currentTarget.children].forEach(btn=>btn.classList.remove('active'))
    //2. 为当前用户正在点击的按钮加上高亮active
    ev.target.classList.add('active')
}
// 5. 设置与栏目对应的内容激活状态
/**
 * 参数:
 * 1 . 事件对象:event
 * 2.当天正在被点击的按钮(选项):currentBtn:
 */
function setContentStatus(ev, currentBtn){
    //获取所有内容块ul
    const lists = document.querySelectorAll('.content > ul')
    // 1. 将激活的列表全部隐藏
    // lists.classList.replace('actice','hidden')
    // 2.将激活的列表全部隐藏,active->hidden
    // 遍历数组直接替换
    lists.forEach(list => list.classList.replace('active','hidden'))
    //2.为当前用户正在点击的按钮加上高亮
    // 找到与栏目ID相同的新闻ul
    //find()满足条件的第一个
    const currList = [...lists].find(list=>list.dataset.key==currentBtn.dataset.key)
    console.log(currList);
    // 3. 设置当前列表为激活状态active
    currList.classList.replace('hidden','active')
}

导出方法

export{cates,details,createTab,setBtnStatus, setContentStatus}