收藏
PHPz批改状态：合格
老师批语：完成的很好, 继续加油
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>选项卡</title><style>.box >.nav{display: grid;grid-template-columns: repeat(10,1fr);}/*隐藏*/.hidden{display: none}/*显示*/.show{ background-color: lightgreen; }</style></head><body><div class="box"><!-- 栏目--><div class="nav"></div><!-- 内容部分--><div class="content"></div></div><script type="module">// 1. 导入模块import {createTab,setBtnStatus, setContentStatus} from "./ceshimodules/mymodules.js";// 获取导航栏let navs = document.querySelector('.nav');// 获取内容区let content = document.querySelector('.content')// console.log(content)// 2. 页面加载完成,创建栏目和对应的内容// 游览器加载完毕执行js ,传入导航栏和内容window.onload = function (){createTab(navs,content)}// 3. 点击栏目时,设置按钮的状态,与按钮对应的内容的状态// 事件委托(事件冒泡)navs.onclick = function (ev){// console.log(ev.currentTarget)// console.log(ev.target)// 1.当前的按钮设置高亮setBtnStatus(ev)// 2.与按钮对应的内容显示出来setContentStatus(ev,ev.target)}</script></body></html>
// 栏目数据const lanmu = [{'cid': 1, t1: '广东新闻'},{'cid': 2, t1: '深圳新闻'},{'cid': 3, t1: '佛山新闻'},]// 内容数据const contentLists = [{id: 1,cid: 1,title: '标题1',content: [{title: '内容1',url: 'http://baidu.com'},{title: '内容1',url: 'http://baidu.com'},{title: '内容1',url: 'http://baidu.com'}]},{id: 2,cid: 2,title: '标题2',content: [{title: '内容2',url: 'http://baidu.com'},{title: '内容2',url: 'http://baidu.com'},{title: '内容2',url: 'http://baidu.com'}]},{id: 3,cid: 3,title: '标题3',content: [{title: '内容3',url: 'http://baidu.com'},{title: '内容3',url: 'http://baidu.com'},{title: '内容3',url: 'http://baidu.com'}]},]function createTab(navs, content) {// 1. 生成样目for (let i = 0; i < lanmu.length; i++) {let but1 = document.createElement('button');// 生成每一个button// button 的文字but1.textContent = lanmu[i]['t1'];but1.dataset.key = lanmu[i].cidif (i === 0) but1.classList.add('show')navs.append(but1)}// 2. 生成内容for (let i = 0; i < contentLists.length; i++) {// (1) 创建列表 <ul>let ul = document.createElement('ul');// (2) 添加列表索引<ul data-key>ul.dataset.key = contentLists[i]['cid']// (3) 默认显示第1个,其它隐藏ul.classList.add(i === 0 ? 'show' : 'hidden')// (4) 生成子元素<li><a>用于显示每一条数据for (let l = 0; l < contentLists[i].content.length; l++) {// 1. 生成 <li>let li = document.createElement('li');// 2. 生成 <a>let a = document.createElement('a')// 3. a.href// console.log('111',contentLists[i].content[l].url)a.href = contentLists[i].content[l].url// 4. a.textContenta.textContent = contentLists[i].content[l].title// console.log(contentLists[i].content[l].title)// 5. 将<a>添加到<li>li.append(a)// 6. <li>添加到<ul>ul.append(li)// 7. <ul>添加到内容容器中.contentcontent.append(ul)}}}function setBtnStatus(ev){// 1.当前的按钮let currentBtn = ev.target;// console.log('当前的按钮',currentBtn)// 2. 去掉所有按钮的show, 遍历// ev.currentTarget: 事件绑定主体 , 父元素// console.log(ev.currentTarget.children);// console.log(typeof [...ev.currentTarget.children]);// console.log([...ev.currentTarget.children]);[...ev.currentTarget.children].forEach(function (btn){btn.classList.remove('show')})// 3.设置当前按钮的亮度currentBtn.classList.add('show')}function setContentStatus(ev,currentBtn){// 1. 获取所有列表let lists = document.querySelectorAll('.content>ul')// 2. 去掉所有列表show,换成hiddenlists.forEach( list=>list.classList.replace('show','hidden'))// 3. 找到与栏目key对应的列表const gongtongdain = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);// console.log(gongtongdain)// 4. 将要显示的列表,加上active,显示出来// gongtongdain.classList.replace()gongtongdain.classList.replace('hidden','show')}export {createTab,setBtnStatus, setContentStatus}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
