收藏
JS文档exportexport{...}export{ as }export defaultexport{ as default }注意：一个模块仅允许一个export default
import {...} fromimport { as } fromimport * as obj fromimport obj from注意：import 具有只读，提升二大特征
=======================
<title>选项卡-模块</title><style>/* 隐藏类 */.hidden {display: none;}/* 显示类 */.active {display: block;}/* 激活类 */.box > .type > *.active,.content > *.active {background-color: lightgreen;}</style></head><body><div class="box"><!-- 1.栏目组 --><div class="type" style="display: flex"></div><!-- 2.内容组 --><div class="content"></div></div><script type="module">//导入模块import { createTab, setBtnStatue, setContentStatus } from "./1.js";// 1.读取栏目和内容的元素const type = document.querySelector(".type");const content = document.querySelector(".content");//2.当页面加载成功,交自动初始化选项卡window.onload = createTab(type, content);//3.点击栏目时自动切换内容type.onclick = (ev) => {//事件委托,将按钮上的点击事件全部由父级.type代理完成//ev.currentTarget:事件的绑定者(div.type)//ev.target:事件触发者(button)// console.log(ev.target);// console.log(ev.currentTarget);// console.log(this);// 2.设置栏目高亮setBtnStatue(ev);setContentStatus(ev, ev.target);};</script></body>
//栏目const cates = [{ id: 1, cname: "国际新闻" },{ id: 2, cname: "中国新闻" },{ id: 3, cname: "本地新闻" },];//与栏目对应的内容//内容必须与栏目的id一一对应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",},],},];//1.自动创建栏目和对应的内容function createTab(type, content) {//1.1 生成栏目for (let i = 0; i < cates.length; i++) {const btn = document.createElement("button");btn.textContent = cates[i].cname;//添加自定义数据属性 "data-key" 用于和指定的数据内容进行绑定btn.dataset.key = cates[i].id;// console.log(cates[i].id);if (i === 0) {btn.classList.add("active");}type.append(btn);}// console.log(details.length);// 1.2 生成内容for (let i = 0; i < details.length; i++) {let ul = document.createElement("ul");//与栏目组的data-key 进行绑定ul.dataset.key = details[i].cid;//全部内容,刚加载时,默认全是隐藏的,哪个需要显示由默认分类标签决定ul.classList.add(i === 0 ? "active" : "hidden");//二级循环,把与列表对应的内容全部渲染出来for (let j = 0; j < details[i].content.length; j++) {let li = document.createElement("li");let a = document.createElement("a");a.textContent = details[i].content[j].title;a.href = details[i].content[j].url;li.append(a);ul.append(li);content.append(ul);}}}//2.设置当前栏目高亮function setBtnStatue(ev) {//(1)先把按钮上的高亮状态全取消,由于不知道你当前选的是哪个,所以遍历一下// ev.currentTaget:dispatchEvent.type 父级// console.log(ev.currentTarget.children);// console.log([...ev.currentTarget.children]);// console.log(ev.target);[...ev.currentTarget.children].forEach((btn) =>btn.classList.remove("active"));//(2)设置高亮ev.target.classList.add("active");}// 3. 设置与栏目对应的内容的激活状态function setContentStatus(ev, currentBtn) {console.log(ev.target); //事件触发者 btn.onclick 子级// console.log(ev.currentTarget); //事件绑定者 div.type父级const list = document.querySelectorAll(".content>ul");// console.log(list);// list.forEach((ul) => console.log(ul));list.forEach((ul) => ul.classList.replace("active", "hidden"));// console.log(currentBtn);//找到与栏目id对应的内容const currList = [...list].find((ul) => ul.dataset.key === currentBtn.dataset.key);// console.log(conList);currList.classList.replace("hidden", "active");}//导出模块成员export { createTab, setBtnStatue, setContentStatus };
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
