search

博客列表 >JS-tab标签页（原生）--- php中文网十期线上班

JS-tab标签页（原生）--- php中文网十期线上班

Miss灬懒虫
Miss灬懒虫原创
2020年03月02日 16:03:501001浏览

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中文网这个平台!

上一条：JS-懒加载（原生）-- php培训十期线上班下一条：HTML脚本
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多