devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript之tab栏切换_js tab切换

作者：盐析白兔 | 2024-02-08 14:06:12

赞

踩

js tab切换

本文主要介绍如何通过JS实现tab栏的切换效果，下面介绍五种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象实现代码复用；4.let关键字封装函数实现代码复用；5.自定义属性封装函数实现代码复用

1.利用自定义属性

此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         
  15.         a {
  16.             text-decoration: none;
  17.         }
  18.         
  19.         li {
  20.             list-style: none;
  21.         }
  22.         
  23.         ul::after {
  24.             display: block;
  25.             content: '';
  26.             clear: both;
  27.         }
  28.         
  29.         ul li {
  30.             float: left;
  31.             margin-right: 5px;
  32.             background-color: skyblue;
  33.         }
  34.         
  35.         ul li:first-child {
  36.             background-color: #ccc;
  37.         }
  38.         
  39.         h2 {
  40.             text-align: center;
  41.         }
  42.         
  43.         ul li a {
  44.             display: inline-block;
  45.             font-size: 20px;
  46.             text-align: center;
  47.             width: 200px;
  48.             height: 50px;
  49.             line-height: 50px;
  50.             color: #000;
  51.         }
  52.         /* 选项区域 */
  53.         
  54.         .optionArea {
  55.             position: relative;
  56.         }
  57.         
  58.         .optionArea div {
  59.             position: absolute;
  60.             top: 10px;
  61.             width: 1220px;
  62.             height: 500px;
  63.             background-color: pink;
  64.             display: none;
  65.         }
  66.         
  67.         .optionArea div:first-child {
  68.             display: block;
  69.         }
  70.     </style>
  71. </head>
  72.  
  73. <body>
  74.     <ul>
  75.         <li><a href="javascript:;">选项一</a></li>
  76.         <li><a href="javascript:;">选项二</a></li>
  77.         <li><a href="javascript:;">选项三</a></li>
  78.         <li><a href="javascript:;">选项四</a></li>
  79.         <li><a href="javascript:;">选项五</a></li>
  80.         <li><a href="javascript:;">选项六</a></li>
  81.     </ul>
  82.     <section class="optionArea">
  83.         <div>
  84.             <h2>标题1</h2>
  85.         </div>
  86.         <div>
  87.             <h2>标题2</h2>
  88.         </div>
  89.         <div>
  90.             <h2>标题3</h2>
  91.         </div>
  92.         <div>
  93.             <h2>标题4</h2>
  94.         </div>
  95.         <div>
  96.             <h2>标题5</h2>
  97.         </div>
  98.         <div>
  99.             <h2>标题6</h2>
  100.         </div>
  101.     </section>
  102.     <script>
  103.         var lis = document.querySelectorAll('li');
  104.         var divs = document.querySelectorAll('div');
  105.         for (let i = 0; i < lis.length; i++) {
  106.             document.querySelectorAll('li')[i].setAttribute('index', i);
  107.             lis[i].onclick = function() {
  108.                 for (let i of lis) {
  109.                     i.style.backgroundColor = 'skyblue';
  110.                 }
  111.                 this.style.backgroundColor = '#ccc';
  112.                 for (let i of divs) {
  113.                     i.style.display = 'none';
  114.                 }
  115.                 divs[this.getAttribute('index')].style.display = 'block';
  116.             }
  117.         }
  118.     </script>
  119. </body>
  120.  
  121. </html>

2.利用let关键词

此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         
  15.         a {
  16.             text-decoration: none;
  17.         }
  18.         
  19.         li {
  20.             list-style: none;
  21.         }
  22.         
  23.         ul::after {
  24.             display: block;
  25.             content: '';
  26.             clear: both;
  27.         }
  28.         
  29.         ul li {
  30.             float: left;
  31.             margin-right: 5px;
  32.             background-color: skyblue;
  33.         }
  34.         
  35.         ul li:first-child {
  36.             background-color: #ccc;
  37.         }
  38.         
  39.         h2 {
  40.             text-align: center;
  41.         }
  42.         
  43.         ul li a {
  44.             display: inline-block;
  45.             font-size: 20px;
  46.             text-align: center;
  47.             width: 200px;
  48.             height: 50px;
  49.             line-height: 50px;
  50.             color: #000;
  51.         }
  52.         /* 选项区域 */
  53.         
  54.         .optionArea {
  55.             position: relative;
  56.         }
  57.         
  58.         .optionArea div {
  59.             position: absolute;
  60.             top: 10px;
  61.             width: 1220px;
  62.             height: 500px;
  63.             background-color: pink;
  64.             display: none;
  65.         }
  66.         
  67.         .optionArea div:first-child {
  68.             display: block;
  69.         }
  70.     </style>
  71. </head>
  72.  
  73. <body>
  74.     <ul>
  75.         <li><a href="javascript:;">选项一</a></li>
  76.         <li><a href="javascript:;">选项二</a></li>
  77.         <li><a href="javascript:;">选项三</a></li>
  78.         <li><a href="javascript:;">选项四</a></li>
  79.         <li><a href="javascript:;">选项五</a></li>
  80.         <li><a href="javascript:;">选项六</a></li>
  81.     </ul>
  82.     <section class="optionArea">
  83.         <div>
  84.             <h2>标题1</h2>
  85.         </div>
  86.         <div>
  87.             <h2>标题2</h2>
  88.         </div>
  89.         <div>
  90.             <h2>标题3</h2>
  91.         </div>
  92.         <div>
  93.             <h2>标题4</h2>
  94.         </div>
  95.         <div>
  96.             <h2>标题5</h2>
  97.         </div>
  98.         <div>
  99.             <h2>标题6</h2>
  100.         </div>
  101.     </section>
  102.  
  103.  
  104.     <script>
  105.         var lis = document.querySelectorAll('li');
  106.         var divs = document.querySelectorAll('div');
  107.         for (let i = 0; i < lis.length; i++) {
  108.             lis[i].onclick = function() {
  109.                 for (let i of lis) {
  110.                     i.style.backgroundColor = 'skyblue';
  111.                 }
  112.                 this.style.backgroundColor = '#ccc';
  113.                 for (let i of divs) {
  114.                     i.style.display = 'none';
  115.                 }
  116.                 divs[i].style.display = 'block';
  117.             }
  118.         }
  119.     </script>
  120. </body>
  121.  
  122. </html>

3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象可使不同的tab栏互不影响，达到代码复用的效果，从而提高开发效率。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         
  15.         a {
  16.             text-decoration: none;
  17.         }
  18.         
  19.         li {
  20.             list-style: none;
  21.         }
  22.         
  23.         .tab .ul::after {
  24.             display: block;
  25.             content: '';
  26.             clear: both;
  27.         }
  28.         
  29.         .tab .ul a {
  30.             float: left;
  31.             margin-right: 5px;
  32.             background-color: skyblue;
  33.             font-size: 20px;
  34.             text-align: center;
  35.             width: 200px;
  36.             height: 50px;
  37.             line-height: 50px;
  38.             color: #000;
  39.         }
  40.         
  41.         .bc {
  42.             background-color: #ccc !important;
  43.         }
  44.         
  45.         .tab h2 {
  46.             text-align: center;
  47.         }
  48.         
  49.         .optionArea div:nth-child(n+2) {
  50.             display: none;
  51.         }
  52.     </style>
  53. </head>
  54.  
  55. <body>
  56.     <div class="tab">
  57.         <div class="ul">
  58.             <a href="javascript:;" class="bc">选项一</a>
  59.             <a href="javascript:;">选项二</a>
  60.             <a href="javascript:;">选项三</a>
  61.         </div>
  62.         <section class="optionArea">
  63.             <div>
  64.                 标题1
  65.             </div>
  66.             <div>
  67.                 标题2
  68.             </div>
  69.             <div>
  70.                 标题3
  71.             </div>
  72.         </section>
  73.     </div>
  74.     <div class="tab">
  75.         <div class="ul">
  76.             <a href="javascript:;" class="bc">选项一</a>
  77.             <a href="javascript:;">选项二</a>
  78.             <a href="javascript:;">选项三</a>
  79.         </div>
  80.         <section class="optionArea">
  81.             <div>
  82.                 标题1
  83.             </div>
  84.             <div>
  85.                 标题2
  86.             </div>
  87.             <div>
  88.                 标题3
  89.             </div>
  90.         </section>
  91.     </div>
  92.     <div class="tab">
  93.         <div class="ul">
  94.             <a href="javascript:;" class="bc">选项一</a>
  95.             <a href="javascript:;">选项二</a>
  96.             <a href="javascript:;">选项三</a>
  97.         </div>
  98.         <section class="optionArea">
  99.             <div>
  100.                 标题1
  101.             </div>
  102.             <div>
  103.                 标题2
  104.             </div>
  105.             <div>
  106.                 标题3
  107.             </div>
  108.         </section>
  109.     </div>
  110.     <div class="tab">
  111.         <div class="ul">
  112.             <a href="javascript:;" class="bc">选项一</a>
  113.             <a href="javascript:;">选项二</a>
  114.             <a href="javascript:;">选项三</a>
  115.         </div>
  116.         <section class="optionArea">
  117.             <div>
  118.                 标题1
  119.             </div>
  120.             <div>
  121.                 标题2
  122.             </div>
  123.             <div>
  124.                 标题3
  125.             </div>
  126.         </section>
  127.     </div>
  128.     <script>
  129.         var uls = document.querySelectorAll('.ul');
  130.         for (let i of uls) {
  131.             i.addEventListener('click', function(e) {
  132.                 var as = e.target.parentNode.children;
  133.                 for (let i = 0; i < as.length; i++) {
  134.                     as[i].className = '';
  135.                     as[i].setAttribute('index', i);
  136.                 }
  137.                 e.target.className = 'bc';
  138.                 // 底下的标题先全部隐藏
  139.                 var divs = e.target.parentNode.nextElementSibling.children;
  140.                 for (let i of divs) {
  141.                     i.style.display = 'none';
  142.                 }
  143.                 // 显示对应的标题
  144.                 divs[e.target.getAttribute('index')].style.display = 'block';
  145.             })
  146.         }
  147.     </script>
  148. </body>
  149.  
  150. </html>

4.第四种方法实际上将第二种方法进行封装，利用函数的局部作用域及let提供的块级作用域实现tab的复用。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         
  15.         a {
  16.             text-decoration: none;
  17.         }
  18.         
  19.         li {
  20.             list-style: none;
  21.         }
  22.         
  23.         .tab .ul::after {
  24.             display: block;
  25.             content: '';
  26.             clear: both;
  27.         }
  28.         
  29.         .tab .ul a {
  30.             float: left;
  31.             margin-right: 5px;
  32.             background-color: skyblue;
  33.             font-size: 20px;
  34.             text-align: center;
  35.             width: 200px;
  36.             height: 50px;
  37.             line-height: 50px;
  38.             color: #000;
  39.         }
  40.         
  41.         .bc {
  42.             background-color: #ccc !important;
  43.         }
  44.         
  45.         .tab h2 {
  46.             text-align: center;
  47.         }
  48.         
  49.         .optionArea div:nth-child(n+2) {
  50.             display: none;
  51.         }
  52.     </style>
  53. </head>
  54.  
  55. <body>
  56.     <div class="tab">
  57.         <div class="ul">
  58.             <a href="javascript:;" class="bc">选项一</a>
  59.             <a href="javascript:;">选项二</a>
  60.             <a href="javascript:;">选项三</a>
  61.         </div>
  62.         <section class="optionArea">
  63.             <div>
  64.                 标题1
  65.             </div>
  66.             <div>
  67.                 标题2
  68.             </div>
  69.             <div>
  70.                 标题3
  71.             </div>
  72.         </section>
  73.     </div>
  74.     <div class="tab">
  75.         <div class="ul">
  76.             <a href="javascript:;" class="bc">选项一</a>
  77.             <a href="javascript:;">选项二</a>
  78.             <a href="javascript:;">选项三</a>
  79.         </div>
  80.         <section class="optionArea">
  81.             <div>
  82.                 标题1
  83.             </div>
  84.             <div>
  85.                 标题2
  86.             </div>
  87.             <div>
  88.                 标题3
  89.             </div>
  90.         </section>
  91.     </div>
  92.  
  93.     <div class="tab">
  94.         <div class="ul">
  95.             <a href="javascript:;" class="bc">选项一</a>
  96.             <a href="javascript:;">选项二</a>
  97.             <a href="javascript:;">选项三</a>
  98.         </div>
  99.         <section class="optionArea">
  100.             <div>
  101.                 标题1
  102.             </div>
  103.             <div>
  104.                 标题2
  105.             </div>
  106.             <div>
  107.                 标题3
  108.             </div>
  109.         </section>
  110.     </div>
  111.     <script>
  112.         var tabs = document.querySelectorAll('.tab');
  113.         for (let i of tabs) {
  114.             tabChange(i);
  115.         }
  116.  
  117.         function tabChange(e) {
  118.             var as = e.querySelectorAll('a');
  119.             var divs = e.querySelectorAll('section div');
  120.             for (let i in as) {
  121.                 as[i].onclick = function() {
  122.                     for (let i of as) {
  123.                         i.className = '';
  124.                     }
  125.                     this.className = 'bc';
  126.                     for (let i of divs) {
  127.                         i.style.display = 'none';
  128.                     }
  129.                     divs[i].style.display = 'block';
  130.                 }
  131.             }
  132.  
  133.         }
  134.     </script>
  135. </body>
  136.  
  137. </html>

5.第五种方法未使用let关键词，主要根据创建的自定义属性实现效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         
  15.         a {
  16.             text-decoration: none;
  17.         }
  18.         
  19.         li {
  20.             list-style: none;
  21.         }
  22.         
  23.         .tab .ul::after {
  24.             display: block;
  25.             content: '';
  26.             clear: both;
  27.         }
  28.         
  29.         .tab .ul a {
  30.             float: left;
  31.             margin-right: 5px;
  32.             background-color: skyblue;
  33.             font-size: 20px;
  34.             text-align: center;
  35.             width: 200px;
  36.             height: 50px;
  37.             line-height: 50px;
  38.             color: #000;
  39.         }
  40.         
  41.         .bc {
  42.             background-color: #ccc !important;
  43.         }
  44.         
  45.         .tab h2 {
  46.             text-align: center;
  47.         }
  48.         
  49.         .optionArea div:nth-child(n+2) {
  50.             display: none;
  51.         }
  52.     </style>
  53. </head>
  54.  
  55. <body>
  56.     <div class="tab">
  57.         <div class="ul">
  58.             <a href="javascript:;" class="bc">选项一</a>
  59.             <a href="javascript:;">选项二</a>
  60.             <a href="javascript:;">选项三</a>
  61.         </div>
  62.         <section class="optionArea">
  63.             <div>
  64.                 标题1
  65.             </div>
  66.             <div>
  67.                 标题2
  68.             </div>
  69.             <div>
  70.                 标题3
  71.             </div>
  72.         </section>
  73.     </div>
  74.     <div class="tab">
  75.         <div class="ul">
  76.             <a href="javascript:;" class="bc">选项一</a>
  77.             <a href="javascript:;">选项二</a>
  78.             <a href="javascript:;">选项三</a>
  79.         </div>
  80.         <section class="optionArea">
  81.             <div>
  82.                 标题1
  83.             </div>
  84.             <div>
  85.                 标题2
  86.             </div>
  87.             <div>
  88.                 标题3
  89.             </div>
  90.         </section>
  91.     </div>
  92.  
  93.     <div class="tab">
  94.         <div class="ul">
  95.             <a href="javascript:;" class="bc">选项一</a>
  96.             <a href="javascript:;">选项二</a>
  97.             <a href="javascript:;">选项三</a>
  98.         </div>
  99.         <section class="optionArea">
  100.             <div>
  101.                 标题1
  102.             </div>
  103.             <div>
  104.                 标题2
  105.             </div>
  106.             <div>
  107.                 标题3
  108.             </div>
  109.         </section>
  110.     </div>
  111.     <script>
  112.         var tabs = document.querySelectorAll('.tab');
  113.         for (let i of tabs) {
  114.             tabChange(i);
  115.         }
  116.  
  117.         function tabChange(e) {
  118.             var as = e.querySelectorAll('a');
  119.             var divs = e.querySelectorAll('section div');
  120.             for (var i = 0; i < as.length; i++) {
  121.                 // 可以通过节点的“.”直接创建自定义属性，但不会显示出来
  122.                 as[i].location = i;
  123.                 as[i].onclick = function() {
  124.                     for (let i of as) {
  125.                         i.className = '';
  126.                     }
  127.                     this.className = 'bc';
  128.                     for (let i of divs) {
  129.                         i.style.display = 'none';
  130.                     }
  131.                     divs[this.location].style.display = 'block';
  132.                 }
  133.             }
  134.         }
  135.     </script>
  136. </body>
  137.  
  138. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/69354
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号