Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JS-tab标签页（原生）--- php中文网十期线上班
Blogger Information
Blog 22
fans 1
comment 1
visits 22265
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-tab标签页（原生）--- php中文网十期线上班
Miss灬懒虫
Original
1000 people have browsed it

JS-tab标签页（原生）

关于案例

tab标签页的关键在于，页面元素active状态的控制，其次data-是H5提供的数据关联属性，我这里自定义了索引也就是data-index,通过他给返回的 HTML元素类数组或者节点类数组进行遍历，已找到自己需要的元素。

event.target是事件的元素；

另外，classList属性是指当前元素的样式属性。我们通过他的remove()和add()方法实现，元素样式的移除和添加。

运行效果

案例代码

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tab选项卡</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             background-color:#cccccc;
  13.             font-size: 13px;
  14.         }
  15.         h2{
  16.             height: 50px;
  17.             line-height: 50px;
  18.             text-align: center;
  19.         }
  20.         ul{
  21.             list-style: none;
  22.         }
  23.         .tab-container{
  24.             width: 600px;
  25.             height: 400px;
  26.             background-color: #ffffff;
  27.             margin:0 auto;
  28.             border-radius: 6px;
  29.         }
  30.         .tab-nav{
  31.             height: 40px;
  32.         }
  33.         .tab-nav >ul{
  34.             font-size: 1.1rem;
  35.             margin: 0 5px;
  36.         }
  37.         .tab-nav >ul>li{
  38.             line-height: 40px;
  39.             text-align: center;
  40.             padding: 0 20px;
  41.             float: left;
  42.         }
  43.         .tab-nav >ul>li:hover{
  44.             cursor: pointer;
  45.         }
  46.         .tab-content{
  47.             height: 316px;
  48.             border-top: #dfdede solid 1px;
  49.             padding: 20px;
  50.         }
  51.         .detail{
  52.             display: none;
  53.         }
  54.         .detail.active {
  55.             display: block;
  56.             border: none;
  57.         }
  58.         .tab-content li{
  59.             line-height: 25px;
  60.             list-style-type:disc;
  61.             margin-left: 20px;
  62.         }
  63.         .active{
  64.             border-bottom: #f80303 solid 1px;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <h2>Tab选项卡</h2>
  70.     <div class="tab-container">
  71.         <div class="tab-nav">
  72.             <ul>
  73.                 <li class="active" data-index="1">技术文章</li>
  74.                 <li data-index="2">网站源码</li>
  75.                 <li data-index="3">原生手册</li>
  76.                 <li data-index="4">推荐博文</li>
  77.             </ul>
  78.         </div>
  79.         <div class="tab-content">
  80.             <div class="detail active"  data-index="1">
  81.                 <ul>
  82.                     <li>CSS制作轮播图</li>
  83.                     <li>Chrome调试小技巧</li>
  84.                     <li>Excel自动生成日期</li>
  85.                     <li>Tab选项卡的控制</li>
  86.                 </ul>
  87.             </div>
  88.             <div class="detail" data-index="2">
  89.                 <ul>
  90.                     <li>Admin客户关系管理系统</li>
  91.                     <li>Bootstrap前端框架</li>
  92.                     <li>layui后端框架</li>
  93.                     <li>Laravel-PHP框架</li>
  94.                 </ul>
  95.             </div>
  96.             <div class="detail" data-index="3">
  97.                 <ul>
  98.                     <li>手册-1</li>
  99.                     <li>手册-2</li>
  100.                     <li>手册-3</li>
  101.                     <li>手册-4</li>
  102.                 </ul>
  103.             </div>
  104.             <div class="detail" data-index="4">
  105.                 <ul>
  106.                     <li>浅谈SEO优化</li>
  107.                     <li>PHP的闭包和异常处理</li>
  108.                     <li>MySQLi常见问题</li>
  109.                     <li>jQuery的基本语法</li>
  110.                 </ul>
  111.             </div>
  112.         </div>
  113.     </div>
  114.     <script src="js/tab.js"></script>
  115. </body>
  116. </html>

tab.js

  1. //获取导航标签
  2.         var tabNav=document.querySelector('.tab-nav');
  4.         //获取导航中所有的 li 并且转换为真正的数组
  5.         var navArr=Array.from(tabNav.firstElementChild.children);
  7.         //获取所有标签导航对应的详情页
  8.         var tabDetails=document.querySelectorAll('.detail');
  9.         /*
  10.          * 利用冒泡的原理，将tab-nav下 li 的点击事件，绑定到 tab-nav的上面；
  11.          * 同理 将详情页的 li 的显示事件 也绑定到 detail中
  12.          */
  13.          tabNav.addEventListener('click',displayDetail,false);
  15.          //监听tab标签 点击事件的函数
  16.          function displayDetail(event){
  18.              //1.清空原来tab激活标签的样式，并且设置当前正在被点击的标签的激活样式
  19.              //classList是当前页面样式表选择器列表，其包含remove add replace
  20.              navArr.forEach(function(tab){
  21.                  tab.classList.remove('active');
  22.              });
  23.              event.target.classList.add('active');
  25.              //情况当前激活的标签样式，并且判断，是否存在和正
  26.              //在被点击的 tab标签导航的 data-index一样的详情页，有就显示
  27.              tabDetails.forEach(function(detail) {detail.classList.remove('active')});
  28.              tabDetails.forEach(function(detail) {
  29.                 // 详情内容data-index与标签导航的data-index相等就显示出来
  30.                 if (detail.dataset.index === event.target.dataset.index) {
  31.                     detail.classList.add('active');
  32.                 }
  33.             });
  34.          }

特别鸣谢

截止到目前，感觉自己在PHP中文网的培训中学到了很多，非常感谢老师的辛勤付出，也希望自己能学到有用的知识！
同时，也感谢PHP中文网这个平台!

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