tab栏切换原理

原理

让上面标签的个数和下面盒子个数一样多,然后通过获取类/tag的方式获取双方的数组,这样他们是一一对应的关系。
your text

步骤:

  1. 循环,对于每个上面按钮的元素绑定一个index的值(不能直接使用i,所有的i都会指向btn.length
  2. 对每个元素加上 onmousemoveonclick的事件
  3. 在函数内清空所有按钮的样式,清空所有的盒子显示
  4. 只留下当前选中按钮的样式和当前盒子的显示
  1. window.onload = function(){
  2. var btns = document.getElementsByTagName("button");
  3. var divs = document.getElementById("divs").getElementsByTagName("div");
  4. for(var i=0;i<btns.length;i++)
  5. {
  6. btns[i].index = i; // 难点
  7. btns[i].onmousemove = function(){
  8. //让所有的 btn 类名清空
  9. for(var j=0;j<btns.length;j++)
  10. {
  11. btns[j].className = "";
  12. }
  13. // 当前的那个按钮 的添加 类名
  14. this.className = "current";
  15. //先隐藏下面所有的 div盒子
  16. for(var i=0;i<divs.length;i++)
  17. {
  18. divs[i].style.display = "none";
  19. }
  20. //留下中意的那个 跟点击的序号有关系的
  21. divs[this.index].style.display ="block";
  22. }
  23. }
  24. }

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. .box {
  8. width: 400px;
  9. margin:100px auto;
  10. }
  11. .bottom div{
  12. box-sizing: border-box;
  13. width:100%;
  14. height: 300px;
  15. background-color: #fff;
  16. border: 1px solid #333;
  17. border-top: none;
  18. display: none;
  19. }
  20. .top{
  21. height: 30px;
  22. font-size: 0px;
  23. }
  24. .top button{
  25. height: 100%;
  26. width: 80px;
  27. border: none;
  28. border-right: 1px solid #333;
  29. border-top: 1px solid #333;
  30. background: #eee;
  31. }
  32. .top button:first-child{
  33. border-left: 1px solid #333;
  34. }
  35. .top .current {
  36. background-color: #fff;
  37. }
  38. </style>
  39. <script>
  40. window.onload = function(){
  41. var btns = document.getElementsByTagName("button");
  42. var divs = document.getElementById("divs").getElementsByTagName("div");
  43. for(var i=0;i<btns.length;i++)
  44. {
  45. btns[i].index = i; // 难点
  46. btns[i].onmousemove = function(){
  47. //让所有的 btn 类名清空
  48. for(var j=0;j<btns.length;j++)
  49. {
  50. btns[j].className = "";
  51. }
  52. // 当前的那个按钮 的添加 类名
  53. this.className = "current";
  54. //先隐藏下面所有的 div盒子
  55. for(var i=0;i<divs.length;i++)
  56. {
  57. divs[i].style.display = "none";
  58. }
  59. //留下中意的那个 跟点击的序号有关系的
  60. divs[this.index].style.display ="block";
  61. }
  62. }
  63. }
  64. </script>
  65. </head>
  66. <body>
  67. <div class="box">
  68. <div class="top">
  69. <button>第一个</button>
  70. <button>第二个</button>
  71. <button>第三个</button>
  72. <button>第四个</button>
  73. <button>第五个</button>
  74. </div>
  75. <div class="bottom" id="divs">
  76. <div style="display: block;">1号盒子</div>
  77. <div style="background: skyblue;">2号盒子</div>
  78. <div style="background: lightgreen;">3号盒子</div>
  79. <div style="background: violet;">4号盒子</div>
  80. <div style="background: coral;">5号盒子</div>
  81. </div>
  82. </div>
  83. </body>
  84. </html>