前端实现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;
}

缺点：多了一个元素？若是这都算缺点。

前端实现Tab切换栏

tab切换，所需的 UI 只有两组元素 - Header 和 Tab，下面介绍几种不一样的实现方法和他们的优缺点

1.首先来个JS的实现办法。JS的实现每每是比较简单的。本文主讲css实现，js的css就不细写了。

2.CSS方法 - 锚点实现 => 跳转到名为孤独的锚点，而且将孤独的情绪放在页面之上。

3.CSS方法实现 => 锚点实现 => 关于前者的改善 => 经过 :target咱们能选择到 tab，谁来选中 header 的问题。

4.CSS实现 => 使用 label + input 实现

3.CSS方法实现 => 锚点实现 => 关于前者的改善 => 经过 `:target`咱们能选择到 tab，谁来选中 header 的问题。