html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>选项卡</title>
  8.     <link rel="stylesheet" href="tab.css">
  9. </head>
  10. <body>
  11.     <div id="tabBox">
  12.         <ul id="navBox">
  13.             <li class="active">编程</li>
  14.             <li>读书</li>
  15.             <li>运动</li>
  16.         </ul>
  17.         <div class="active">编程使我快乐</div>
  18.         <div>读书使我幸福</div>
  19.         <div>运动使我健康</div>
  20.     </div>
  21.     <script src="选项卡.js"></script>
  22. </body>
  23. </html>

css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. ul{
  6.     list-style: none;
  7. }
  8. #tabBox{
  9.     box-sizing: border-box;
  10.     width:500px;
  11.     margin: 20px auto;
  12. }
  13. #navBox{
  14.     /* 把容器设置为 flex 弹性容器，那么容器中的子元素默认在容器主轴水平靠左排列 */
  15.     display: flex;
  16.     position: relative;
  17.     top: 1px;
  18. }
  19. #navBox li{
  20.     box-sizing: border-box;
  21.     line-height: 35px;
  22.     padding:0 10px;
  23.     border: 1px solid #00b38a;
  24.     margin-right: 10px;
  25. }
  26. #tabBox>div{
  27.     display: none;
  28.     box-sizing: border-box;
  29.     padding: 10px;
  30.     height: 150px;
  31.     border:1px solid #999;
  32. }
  33. #tabBox>div.active{
  34.     display: block;
  35. }
  36. #navBox li.active{
  37.     border-bottom-color: #fff;
  38. }

js

  1. // 获取元素
  2.  let tabBox = document.getElementById('tabBox');
  3.  let tabList = tabBox.getElementsByTagName('div');
  4.  let navBox = document.getElementById('navBox');
  5.  let navList = navBox.getElementsByTagName('li');
  6.  // 循环绑定事件
  7.  for (let i = 0; i < navList.length; i++) {
  8.     navList.onclick = function () {
  9.         changeTab(i);
  10.     }
  11.  }
  12.  // 封装一个方法实现业务逻辑
  13.  function changeTab(clickIndex) {
  14.      for (let i = 0; i < navList.length; i++) {
  15.          navList[i].className = '';
  16.          tabList[i].className = '';
  17.      }
  18.      navlist[clickIndex].className = 'active';
  19.      tabList[clickIndex].className = 'active';
  20.  }
  22. // 通过自定义属性
  23. /*========== 解决办法一：自定义属性解决办法 =========*/
  24. // 循环三个 LI，给每一个 LI 都绑定点击事件
  25. for (var i = 0; i < navList.length; i++) {
  26.     // navList[i] : 当前循环下我们要操作的那个 LI（I变量存储的值是我们需要获取指定元素的索引）
  27.     // 在循环给每个 LI 绑定点击事件的时候，我们给每一个LI（元素对象）设置一个自定义属性 MY-INDEX，属性值存储的是当前 LI 的索引
  28.     navList[i].myIndex = i;
  29.     navList[i].onclick = function () {
  30.         // 我想用的是点击这个 LI 的索引，但是I不是
  31.         // THIS 是当前点击的这个元素 LI;THIS.MY-INDEX 获取的就是之前绑定在元素自定义属性上的索引值;
  32.         changeTab(this.myIndex);
  33.     }
  34. }
  36. // 闭包解决方案
  38. for (var i = 0; i < navList.length; i++) {
  39.     navList[i].onclick = (function (i) {
  40.         return function () {
  41.             changeTab(i);
  42.         }
  43.     })(i);
  44. };

选项卡运行原理图.png