选项卡案例
<!DOCTYPE html><htmllang=“zh-CN”><head><metacharset=“UTF-8”/><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”/><metaname=“viewport”content=“width=device-width, initial-scale=1.0”/><title>经典选项卡</title><style>/* 隐藏 */.hidden { display: none;}/* 显示 */.active { display: block;}.type >*.active,.content >*专业系统搭建点我wcqh.cn.active { background–color: lightgreen;}</style></head><body><divclass=“box”><divclass=“type”style=“display: flex“></div><divclass=“content”></div></div><scripttype=“module”>import* as tabs from ./modules/tabs.js;const type = document.querySelector(.type);const content = document.querySelector(.content); window.专业系统搭建点我wcqh.cnonload =()=> tabs.createTab(type, content); type.onclick = ev =>{ tabs.setContentStatus(ev, ev.target);};</script></body></html>
JS代码部分
// * 栏目数据const cates =[{ cid:1, cname:国际新闻},{ cid:2, cname:中国新闻},{ cid:3, cname:安徽新闻},];// * 列表数据const details =[{ key:1, cid:1, content:[{ title:俄罗斯宣布从赫尔松部分地区撤军, url:https://news.ifeng.com/专业系统搭建点我wcqh.cnc/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,},{t专业系统搭建点我wcqh.cnitle:空战隐身无人僚机亮相！, 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,},],},];f专业系统搭建点我wcqh.cnunction 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.data专业系统搭建点我wcqh.cnset.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);}}}fun专业系统搭建点我wcqh.cnction 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,hi专业系统搭建点我wcqh.cndden));const currentList =[…lists].find(list => list.dataset.key == currentBtn.dataset.key); currentList.classList.replace(hidden,active);}export{ createTab, setBtnStatus, setContentStatus };© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容