收藏
PHPz批改状态：合格
老师批语：完成的不错
<!DOCTYPE html><html lang="zh-CN"><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: lightgreen;}</style></head><body><div class="box"><div class="type" style="display: flex"></div><div class="content"></div></div><script type="module">import * as tabs from './modules/tabs.js';const type = document.querySelector('.type');const content = document.querySelector('.content');window.onload = () => tabs.createTab(type, content);type.onclick = ev => {tabs.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(type, content) {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) btn.classList.add('active');type.append(btn);}// 2. 生成内容for (let i = 0; i < details.length; i++) {const ul = document.createElement('ul');ul.dataset.key = details[i].cid;ul.classList.add(i === 0 ? 'active' : 'hidden');for (let k = 0; k < details[i].content.length; k++) {const li = document.createElement('li');const a = document.createElement('a');a.href = details[i].content[k].url;a.textContent = details[i].content[k].title;li.append(a);ul.append(li);content.append(ul);}}}function setBtnStatus(ev) {const currentBtn = ev.target;[...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'));currentBtn.classList.add('active');}function setContentStatus(ev, currentBtn) {const lists = document.querySelectorAll('.content > ul');lists.forEach(list => list.classList.replace('active', 'hidden'));const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);currentList.classList.replace('hidden', 'active');}export { createTab, setBtnStatus, setContentStatus };
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
