简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 只用JS写选项卡
Blogger Information
Blog 27
fans 1
comment 2
visits 90419
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
只用JS写选项卡
          
Original
602 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>选项卡</title>
  9.     <style>
  10.         .box >.nav{
  11.             display: grid;
  12.             grid-template-columns: repeat(10,1fr);
  13.         }
  14.         /*隐藏*/
  15.         .hidden{display: none}
  16.         /*显示*/
  17.         .show{  background-color: lightgreen; }
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="box">
  22.     <!--    栏目-->
  23.     <div class="nav"></div>
  24.     <!--    内容部分-->
  25.     <div class="content"></div>
  26. </div>
  28. <script type="module">
  30.     // 1. 导入模块
  31.     import {createTab,setBtnStatus, setContentStatus} from "./ceshimodules/mymodules.js";
  33.     // 获取导航栏
  34.     let navs =  document.querySelector('.nav');
  35.     // 获取内容区
  36.     let content = document.querySelector('.content')
  37.     // console.log(content)
  39.     // 2. 页面加载完成,创建栏目和对应的内容
  40.     // 游览器加载完毕执行js ,传入导航栏和内容
  41.     window.onload = function (){
  42.         createTab(navs,content)
  43.     }
  44.     // 3. 点击栏目时,设置按钮的状态,与按钮对应的内容的状态
  45.     // 事件委托(事件冒泡)
  46.     navs.onclick = function (ev){
  47.         // console.log(ev.currentTarget)
  48.         // console.log(ev.target)
  49.         // 1.当前的按钮设置高亮
  50.         setBtnStatus(ev)
  51.         // 2.与按钮对应的内容显示出来
  52.         setContentStatus(ev,ev.target)
  53.     }
  55. </script>
  57. </body>
  58. </html>

JS部分

  1. // 栏目数据
  2. const lanmu = [
  3.     {'cid': 1, t1: '广东新闻'},
  4.     {'cid': 2, t1: '深圳新闻'},
  5.     {'cid': 3, t1: '佛山新闻'},
  6. ]
  8. // 内容数据
  9. const contentLists = [
  10.     {
  11.         id: 1,
  12.         cid: 1,
  13.         title: '标题1',
  14.         content: [
  15.             {
  16.                 title: '内容1',
  17.                 url: 'http://baidu.com'
  18.             },
  19.             {
  20.                 title: '内容1',
  21.                 url: 'http://baidu.com'
  22.             },
  23.             {
  24.                 title: '内容1',
  25.                 url: 'http://baidu.com'
  26.             }
  27.         ]
  28.     },
  29.     {
  30.         id: 2,
  31.         cid: 2,
  32.         title: '标题2',
  33.         content: [
  34.             {
  35.                 title: '内容2',
  36.                 url: 'http://baidu.com'
  37.             },
  38.             {
  39.                 title: '内容2',
  40.                 url: 'http://baidu.com'
  41.             },
  42.             {
  43.                 title: '内容2',
  44.                 url: 'http://baidu.com'
  45.             }
  46.         ]
  47.     },
  48.     {
  49.         id: 3,
  50.         cid: 3,
  51.         title: '标题3',
  52.         content: [
  53.             {
  54.                 title: '内容3',
  55.                 url: 'http://baidu.com'
  56.             },
  57.             {
  58.                 title: '内容3',
  59.                 url: 'http://baidu.com'
  60.             },
  61.             {
  62.                 title: '内容3',
  63.                 url: 'http://baidu.com'
  64.             }
  65.         ]
  66.     },
  68. ]
  70. function createTab(navs, content) {
  71.     // 1. 生成样目
  72.     for (let i = 0; i < lanmu.length; i++) {
  73.         let but1 = document.createElement('button');
  74.         // 生成每一个button
  75.         // button 的文字
  76.         but1.textContent = lanmu[i]['t1'];
  77.         but1.dataset.key = lanmu[i].cid
  78.         if (i === 0) but1.classList.add('show')
  79.         navs.append(but1)
  80.     }
  81.     // 2. 生成内容
  82.     for (let i = 0; i < contentLists.length; i++) {
  83.         // (1) 创建列表 <ul>
  84.         let ul = document.createElement('ul');
  85.         // (2) 添加列表索引<ul data-key>
  86.         ul.dataset.key = contentLists[i]['cid']
  87.         // (3) 默认显示第1个,其它隐藏
  88.         ul.classList.add(i === 0 ? 'show' : 'hidden')
  90.         // (4) 生成子元素<li><a>用于显示每一条数据
  91.         for (let l = 0; l < contentLists[i].content.length; l++) {
  92.             // 1. 生成 <li>
  93.             let li = document.createElement('li');
  94.             // 2. 生成 <a>
  95.             let a = document.createElement('a')
  96.             // 3. a.href
  97.             // console.log('111',contentLists[i].content[l].url)
  98.             a.href = contentLists[i].content[l].url
  99.             // 4. a.textContent
  100.             a.textContent = contentLists[i].content[l].title
  101.             // console.log(contentLists[i].content[l].title)
  102.             // 5. 将<a>添加到<li>
  103.             li.append(a)
  104.             // 6. <li>添加到<ul>
  105.             ul.append(li)
  106.             // 7. <ul>添加到内容容器中.content
  107.             content.append(ul)
  109.     }
  110.         }
  113. }
  115. function setBtnStatus(ev){
  116.     // 1.当前的按钮
  117.     let currentBtn = ev.target;
  118.     // console.log('当前的按钮',currentBtn)
  119.     // 2. 去掉所有按钮的show, 遍历
  120.     // ev.currentTarget: 事件绑定主体 , 父元素
  121.     // console.log(ev.currentTarget.children);
  122.     // console.log(typeof [...ev.currentTarget.children]);
  123.     // console.log([...ev.currentTarget.children]);
  124.     [...ev.currentTarget.children].forEach(function (btn){btn.classList.remove('show')})
  125.     // 3.设置当前按钮的亮度
  126.     currentBtn.classList.add('show')
  129. }
  130. function setContentStatus(ev,currentBtn){
  131.     // 1. 获取所有列表
  132.     let lists = document.querySelectorAll('.content>ul')
  133.     // 2. 去掉所有列表show,换成hidden
  134.     lists.forEach( list=>list.classList.replace('show','hidden'))
  135.     // 3. 找到与栏目key对应的列表
  136.     const gongtongdain = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
  137.     // console.log(gongtongdain)
  138.     // 4. 将要显示的列表,加上active,显示出来
  139.     // gongtongdain.classList.replace()
  140.     gongtongdain.classList.replace('hidden','show')
  141. }
  143. export {createTab,setBtnStatus, setContentStatus}

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：完成的很好, 继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！