<!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>
JS部分
// 栏目数据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].cid if (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.textContent a.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>添加到内容容器中.content content.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,换成hidden lists.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}
