前端實現Tab切換欄

tab切換，所需的 UI 只有兩組元素 - Header 和 Tab，下面介紹幾種不同的實現方法和他們的優缺點

本文主要說一些 CSS 的實現方法。最好的方法是 第四種 => label + input 的實現方式。

1.首先來個JS的實現辦法。JS的實現往往是比較簡單的。本文主講css實現，js的css就不細寫了。

其實沒有什么邏輯，就是 a 觸發 b，修改 class。簡簡單單，平平淡淡。

• 實現思路 => 通過點擊 Header 來觸發 Tab 的display屬性。

  • style

  #tabGroup li {
    display: none;
  }
  #tabGroup .current {
    display: block;
  }
  

  • body

  <nav id="navGroup">
    <h2>tab1</h2>
    <h2>tab2</h2>
    <h2>tab3</h2>
  </nav>
  <ul id="tabGroup">
    <li class="current">content1</li>
    <li>content2</li>
    <li>content3</li>
  </ul>
  

  • js

  const navGroup = document.getElementById("navGroup").getElementsByTagName("h2");
  const tabGroup = document.getElementById("tabGroup").getElementsByTagName("li");
  for (let i = 0; i < navGroup.length; i++) {
    navGroup[i].onclick = function () {
      for (let k = 0; k < tabGroup.length; k++) {
        tabGroup[k].style.display = "none";
      }
      tabGroup[i].style.display = "block";
    }
  }
  

• 缺點：用到了 JS。（其實也不能說是什么缺點，大概只是人類的偏好，和為了襯托 CSS 的實現吧。

---

概述：其實 CSS 的方法，主要是標記。是誰來決定 Tab 的高亮？是誰來決定 Header 的高亮？ => 有時候點擊不一定代表着記錄。 所以，我們要努力讓點擊產生效果，撬動 CSS。

2.CSS方法 - 錨點實現 => 跳轉到名為孤獨的錨點，並且將孤獨的情緒放在頁面之上。

錨點的實現本身是有局限性的。因為它將 元素id放於頁面頂部的特性，當頁面高度很高的時候，就擋住了Header欄。

有時候，不將 body 的 height 設為最大，你是看不出來的。所以我這里故意將 body 設為 1000px。

• 實現思路 => 通過偽元素 :target 來高亮被命運選中的元素 => 那么 header 呢？header 如何來決定誰來高亮它 - 答案是沒有，它被無情的拋棄了。

  • html

  <nav class="tab-header" id="test">
    <a href="#tab1" class="header-item">Tab1</a>
    <a href="#tab2" class="header-item">Tab2</a>
    <a href="#tab3" class="header-item">Tab3</a>
  </nav>
  <ul class="tab-content">
    <li class="content-item" id="tab1">content1</li>
    <li class="content-item" id="tab2">content2</li>
    <li class="content-item" id="tab3">content3</li>
  </ul>
  

  • css

  body,p,div{margin: 0;}
  h2{margin: 0;font-size:100%;}
  ul{margin: 0;padding: 0;list-style: none;}   
  a{text-decoration: none;color:inherit;}
  
  .tab-header,
  .tab-content {
    margin: 0 auto;
  }
  .tab-header {
    width: 600px;
    height: 30px;
    background-color: #089e8a;
    font-size: 0;
    text-shadow: 0 0 10px #000;
    cursor: pointer;
  }
  .tab-content {
    width: 600px;
    height: 400px;
    overflow: hidden;
  }
  .header-item {
    display: inline-block;
    width: 33%;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
  }
  .header-item:hover {
    color: #fff;
  }
  .header-item:target {
    background: #6c9;
  }
  .content-item {
    width: 100%;
    height: 100%;
    text-indent: 2em;
    background-color: #6c9;
  }
  
  body {
    /* position: fixed; */
    height: 1000px;
  }
  

• 缺點：1.對Header的高亮束手無測 2.錨點的限制 => 高度一高的時候，錨點跳轉遮住了導航欄。

3.CSS方法實現 => 錨點實現 => 關於前者的改善 => 通過 :target我們能選擇到 tab，誰來選中 header 的問題。

女孩的心靈，是我觸不可及的地方。就如同這里的 Header 一樣，我們都需要一座橋。

• 實現原理：為了讓 Header 被點擊后，能夠錨點一起改變樣式 => 我們將錨點的 tab 放在 Header 的上方就行了。

  因為他們是兄弟，而且 tab 是哥哥。 => 開弓沒有回頭箭，css找不到之前的兄弟元素，卻可以找到之后的兄弟元素。

  • css => 利用兄弟元素選擇器 ~ => .brother:target ~ .弟弟元素 {...}

  body,p,div{margin: 0;}
  h2{margin: 0;font-size:100%;}
  ul{margin: 0;padding: 0;list-style: none;}   
  a{text-decoration: none;color:inherit;}
  
  ul {
    position: relative;
    margin: 0 auto;
    width: 600px;
    height: 400px;
    overflow: hidden;
    font-size: 0;
  }
  
  li {
    width: 33.3%;
    display: inline-block;
    font-size: 12px;
  }
  .header-item {
    display: inline-block;
    width: 100%;
    line-height: 30px;
    height: 30px;
    background: #089e8a;
    border-right: 1px solid #fff;
    text-align: center;
    text-shadow: 0 0 10px #000;
  }
  .header-item:hover {
    background: #6c8;
  }
  .content-item {
    position: absolute;
    top: 30px;
    left: 0;
    width: 600px;
    height: 370px;
    background: #6c9;
  }
  .current {
    z-index: 1;
  }
  .content-item:target {
    z-index: 1;
  }
  .content-item:target ~ .header-item {
    background: #6c9;
  }
  body {
    height: 1200px;
  }
  

  • html => 真正修改的其實 html 結構。

  <ul>
  <li>
    <p id="tab1" class="content-item current">content1</p>
    <a class="header-item" href="#tab1">Tab1</a>
  </li>
  <li>
    <p id="tab2" class="content-item">content2</p>
    <a class="header-item" href="#tab2">Tab2</a>
  </li>
  <li>
    <p id="tab3" class="content-item">content3</p>
    <a class="header-item" href="#tab3">Tab3</a>
  </li>
  </ul>
  

• 缺點：錨點的技術限制始終存在，科技是一點點進步的，下一步，我們來解決錨點。

intel 芯片的厚度，每年都在縮小，每次到達 厚度的極限的時候 => 就是它們換材料的時候了。 => 其實根本沒有什么極限，只是沒有找到方法罷了。

4.CSS實現 => 使用 label + input 實現

• 實現原理：label 觸發 input-ratio 的點擊（label的特性） => 元素順序：ratio-label-p => 通過 ratio 特性:checked選中 label 和 p 分別改變樣式。

  標記 和 橋梁。都有了。

  • html

  <ul>
    <li>
      <input class="header-anchor" name="nav" type="radio" id="tab1" checked>
      <label class="header-item" for="tab1">Tab One</label>   
      <p class="content-item current">content1</p>
    </li>
    <li>
      <input class="header-anchor" name="nav" type="radio" id="tab2" checked>
      <label class="header-item" for="tab2">Tab Two</label>   
      <p class="content-item item2">content2</p>
    </li>
    <li>
      <input class="header-anchor" name="nav" type="radio" id="tab3" checked>
      <label class="header-item" for="tab3">Tab Three</label>
      <p class="content-item item3">content3</p>
    </li>
  </ul>
  

  • css

  body,p,div{margin: 0;}
  h2{margin: 0;font-size:100%;}
  ul{margin: 0;padding: 0;list-style: none;}   
  a{text-decoration: none;color:inherit;}
  
  ul {
    margin: 0 auto;
    width: 600px;
    height: 400px;
    overflow: hidden;
    font-size: 0;
  }
  
  li {
    width: 33.3%;
    display: inline-block;
    font-size: 12px;
  }
  .header-anchor {
    display: none;
  }
  .header-item {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #089e8a;
    text-align: center;
    border-right: 1px solid #6c9;
    cursor: pointer;
  }
  .header-item:hover {
    color: #fff;
  }
  .content-item {
    position: relative;
    width: 600px;
    height: 370px;
    background: #6c9;
    text-indent: 2em;
  }
  .item2 {
    margin-left: -100%;
  }
  .item3 {
    margin-left: -200%;
  }
  body {
    height: 1200px;
  }
  .header-anchor:checked ~ .header-item {
    background: #6c9;
  }
  .header-anchor:checked ~ .content-item {
    z-index: 1;
  }
  

• 缺點：多了一個元素？如果這都算缺點。