前端實現Tab切換欄

時間 2019-11-25

標籤前端實現 tab 切換简体版

原文原文鏈接

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

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

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

實現思路 => 經過點擊 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>

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。ui

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

錨點的實現自己是有侷限性的。由於它將元素id放於頁面頂部的特性，當頁面高度很高的時候，就擋住了Header欄。code

有時候，不將 body 的 height 設爲最大，你是看不出來的。因此我這裏故意將 body 設爲 1000px。htm

實現思路 => 經過僞元素 :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>

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 同樣，咱們都須要一座橋。get

實現原理：爲了讓 Header 被點擊後，可以錨點一塊兒改變樣式 => 咱們將錨點的 tab 放在 Header 的上方就好了。input

由於他們是兄弟，並且 tab 是哥哥。 => 開弓沒有回頭箭，css找不到以前的兄弟元素，卻能夠找到以後的兄弟元素。it

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>

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

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

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>

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;
}