收藏
PHPz批改状态：合格
老师批语：完成的不错, 继续加油
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>经典选项卡</title><style>/* 隐藏 */.hidden {display: none;}/* 显示 */.active {display: block;}.type > *.active.content > *.active {background-color: blue;}</style></head><body><div class="box"><div class="bt" style="display: flex;"></div><div class="nr"></div></div><script type="module">// 导入模块import * as tabs from './js/zuoye.js'// 1.获取栏目，内容容器元素const bt = document.querySelector('.bt')const nr = document.querySelector('.nr')// 2.页面加载完成，创建栏目和对应的内容// 自动生成栏目和内容数据window.onload= () => tabs.createTab(bt, nr)// 3.点击栏目时，设置按钮的状态，与按钮对应的内容的状态，时间委托bt.onclick = ev => {// 当前按钮高亮tabs.setBtnStatus(ev)// 与按钮对应的内容显示出来，当前按钮= ev.targettabs.setContentStatus(ev, ev.target)}</script></body></html>
// * 栏目数据const cates = [{ cid: 1, cname: '国际新闻' },{ cid: 2, cname: '中国新闻' },{ cid: 3, cname: '安徽新闻' },];// * 列表数据// 列表数据,必须与指定的栏目,一一对应const details = [{key: 1,cid: 1,content: [{title: '俄罗斯宣布从赫尔松部分地区撤军',url: 'https://news.ifeng.com/c/8KoK54urn1k',},{title: '俄罗斯宣布从赫尔松部分地区撤军',url: 'https://news.ifeng.com/c/8KoK54urn1k',},{title: '俄罗斯宣布从赫尔松部分地区撤军',url: 'https://news.ifeng.com/c/8KoK54urn1k',},],},{key: 2,cid: 2,content: [{title: '空战隐身无人僚机亮相！',url: 'https://news.ifeng.com/c/8KoeDFJXF1b',},{title: '空战隐身无人僚机亮相！',url: 'https://news.ifeng.com/c/8KoeDFJXF1b',},{title: '空战隐身无人僚机亮相！',url: 'https://news.ifeng.com/c/8KoeDFJXF1b',},],},{key: 3,cid: 3,content: [{title: '安康码”上新！家庭成员核酸情况查询更便捷',url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',},{title: '安康码”上新！家庭成员核酸情况查询更便捷',url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',},{title: '安康码”上新！家庭成员核酸情况查询更便捷',url: 'https://ah.ifeng.com/c/8KkGUDhAZNZ',},],},];// 创建栏目和对应的内容区function createTab(bt, nr){// 1.生成栏目for(let i = 0; i < cates.length; i++){// 创建一个按钮const btn = document.createElement('button')// 设置按钮的文本btn.textContent = cates[i].cname// 给按钮一个自定义data=key,用来内容ID绑定btn.dataset.key = cates[i].cid// 默认高亮第一个，给第一个加上active，i绝对等于索引0就是第一个if (i === 0) btn.classList.add('active')// 将按钮添加到栏目容器中bt.append(btn)}// 生成内容for (let i = 0; i < details.length; i++){// 创建UL列表const ul = document.createElement('ul')// 添加列表索引 《ul data-key》、ul.dataset.key = details[i].cid// 默认显示第一个，其他隐藏,三元运算符ul.classList.add(i === 0 ?'active':'hidden')// 生成子元素li和a，用来显示每一条数据for(let k = 0; k < details[i].content.length;k++){// 生成liconst li = document.createElement('li')// 生成aconst a = document.createElement('a')// a属性 hrefa.href = details[i].content[k].url// a标签的文本a.textContent = details[i].content[k].title// 将a添加到lili.append(a)// 将li添加到ulul.append(li)// ul添加到容器nr.append(ul)}}}// 设置按钮高亮function setBtnStatus(ev){// 当前按钮const currentBtn = ev.target;// 去掉所有按钮得active,遍历// ev.currentTarget:事情绑定得主体[...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'))// 设置当前按钮高亮currentBtn.classList.add('active')}// 设置内容状态：与按钮对应得内容显示出来function setContentStatus(ev, currentBtn){// 获取所有列表const lists = document.querySelectorAll('.nr > ul')// 去掉所有列表active,换成hiddenlists.forEach(list => list.classList.replace('active', 'hidden'))// 找到与栏目key对应得列表// lists不是真数组，得换成真数组才能使用findconst currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key)// 将要显示得列表，加上active，显示出来currentList.classList.replace('hidden', 'active')}export {createTab, setBtnStatus,setContentStatus}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
