亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 27
粉絲 1
評論 2
訪問量 96909
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
只用JS寫選項卡
          
原創(chuàng)
859人瀏覽過
  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.     // 獲取內容區(qū)
  36.     let content = document.querySelector('.content')
  37.     // console.log(content)
  39.     // 2. 頁面加載完成,創(chuàng)建欄目和對應的內容
  40.     // 游覽器加載完畢執(zhí)行js ,傳入導航欄和內容
  41.     window.onload = function (){
  42.         createTab(navs,content)
  43.     }
  44.     // 3. 點擊欄目時,設置按鈕的狀態(tài),與按鈕對應的內容的狀態(tài)
  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. // 欄目數(shù)據(jù)
  2. const lanmu = [
  3.     {'cid': 1, t1: '廣東新聞'},
  4.     {'cid': 2, t1: '深圳新聞'},
  5.     {'cid': 3, t1: '佛山新聞'},
  6. ]
  8. // 內容數(shù)據(jù)
  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) 創(chuàng)建列表 <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>用于顯示每一條數(shù)據(jù)
  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}

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：完成的很好, 繼續(xù)加油
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學