收藏
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: burlywood;}</style></head><body><div class="box"><div class="type" style="display: flex"></div><div class="content"></div></div></body><script type="module">import * as tabs from './tabs.js'// console.log(cates)// console.log(details)const type = document.querySelector('.type');const content = document.querySelector('.content');window.onload = tabs.createTab(type,content)type.onclick = ev => {// 1. 设置栏目高亮console.log(111);tabs.setBtnStatus(ev)// 2. 激活与当前栏目对应的新闻列表tabs.setContentStatus(ev.target)}</script></html>
// 1. 栏目const cates = [{ cid: 1, cname: '中国新闻' },{ cid: 2, cname: '国际新闻' },{ cid: 3, cname: '安徽新闻' },]// 2. 内容// 内容的key 必须与 栏目的id绑定const details = [{key: 1,cid: 1,content: [{title: '蔡英文窜美，美官员警告中国不要过度反应，外交部回应',url: 'https://news.ifeng.com/c/8OYFjT9c3KM',},{title: '马英九：从来没有一次像今天受到这么大的冲击',url: 'https://news.ifeng.com/c/8OYI5PZyyRs',},{title: '美媒：王毅与沙利文进行电话交谈',url: 'https://news.ifeng.com/c/8OXw5JWvnRM',},],},{key: 2,cid: 2,content: [{title: '美核航母抵韩，半岛局势会失控吗？',url: 'https://news.ifeng.com/c/8OYApVnV1mN',},{title: '西班牙法律允许强占住房：有华人3年没回西班牙，房子被吉普赛人占了',url: 'https://news.ifeng.com/c/8OXfZLPso8P',},{title: '拜登首次就普京拟在白俄部署核武器表态',url: 'https://news.ifeng.com/c/8OXdmTTNQD6',},],},{key: 3,cid: 3,content: [{title: '省级党政代表团密集赴皖考察！安徽究竟有何看点？',url: 'https://ah.ifeng.com/c/8OXtD8eq0pA',},{title: '合肥、蚌埠、亳州、安庆、宣城最新人事任免！',url: 'https://ah.ifeng.com/c/8OXnxW9z3K5',},{title: '下月起合肥坐高铁到香港！最快只需7时26分',url: 'https://ah.ifeng.com/c/8OXheuq5n55',},],},]// 3. 创建栏目和内容function createTab(type,content){// 1. 生成栏目for(let i=0;i<cates.length;i++){let typ_bnt = document.createElement('button')typ_bnt.dataset.key=cates[i].cidtyp_bnt.textContent=cates[i].cname// 第一个按钮应该是高亮显示if(i===0){typ_bnt.classList.add('active')}type.append(typ_bnt)}for(let i=0; i<details.length; i++){//创建ulconst ulList = document.createElement('ul')// 为每个<ul>添加自定义属性data-keyulList.dataset.key = details[i].cid// 全部内容加载时,默认全隐藏,只要显示第一组新闻列表ulList.classList.add(i===0 ? 'active' : 'hidden')// 循环: 将与列表对应的数据全部渲染出来for(let j=0; j < details[i].content.length; j++){const liList = document.createElement('li')const a = document.createElement('a')a.textContent = details[i].content[j].titlea.href = details[i].content[j].urlliList.append(a)ulList.append(liList)content.append(ulList)}}}// 4. 自动设置栏目高亮function setBtnStatus(ev){// 去掉所有激活样式[...ev.currentTarget.children].forEach(btn=>btn.classList.remove('active'))// 2. 将当前用户正在点击的按钮添加activeev.target.classList.add('active')}// 5. 设置与栏目对应的内容的激活状态function setContentStatus(currentBtn){// 所有的新闻列表<ul>const ulList = document.querySelectorAll('.content > ul')// 1. 将激活的列表全部隐藏 active -> hiddenulList.forEach(list=>list.classList.replace('active','hidden'))// 2. 找到与栏目ID相同(对应的)新闻列表<ul>const curList = [...ulList].find(list=>list.dataset.key===currentBtn.dataset.key)// 3. 设置当前列表为激活activecurList.classList.replace('hidden','active')}export {cates, details, createTab, setBtnStatus, setContentStatus}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
