Use pure CSS to implement elegant tab pages_html/css_WEB-ITnose

Explanation

It is another gadget for practicing. It has no technical content in itself, it is just a combination of several uncommon CSS3 features.

Key points

• The for attribute of the Label tag
• The check pseudo-class of the radio button
• CSS plus sign [ ] selector

Rendering

Principle

Usual tab page The interaction is to click on the tab header and then display the corresponding piece of content. This exclusivity is very similar to a certain native in HTML. What is it? That’s right! It's a radio button group.

The radio button group has a :checked pseudo-class, which can set the style of the radio button after it is selected, so should we use a group of radio button boxes as the header of the tab page? Of course not. The radio button is very stubborn and it is very difficult to influence it with CSS. So what should we do?

Here we need to use the selector in CSS [Actually, I have never used this selector before -_-||]. Simply put, the selector is to select Another specified element immediately following a specified element. For details, please see http://www.w3school.com.cn/cssref/selector_element_plus.asp

Label’s for Attribute is a very interesting thing, it can be understood as a remote control: a label at the bottom of the page can control a radio button or check box at the top of the page through the for attribute~, isn't it amazing? (Pfft →_→)

Combining the above characteristics, you can get a basic idea for implementing a tab page:

A radio button followed by a label [tab header], and then Follow the next div [tab content block]
Use .radio:checked .tab-header to specify the style of the current tab header
Use .radio:checked .tab-header .tab-content to specify the style of the current tab content block

Code

<div class="container">  <div class="tab-wrapper">    <!--tab section 1-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>    <label for="tab-radio-1" class="tab-handler tab-handler-1">水浒传</label>    <div class="tab-content tab-content-1">《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说，以宋江领导的起义军为主要题材，通过一系列梁山英雄反抗压迫、英勇斗争的生动故事，暴露了北宋末年统治阶级的腐朽和残暴，揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。按120回本计，前70回讲述各个好汉上梁山，后50回主要为宋江全伙受招安为朝廷效力，以及被奸臣所害。</div>    <!--tab section 2-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">    <label for="tab-radio-2" class="tab-handler tab-handler-2">三国演义</label>    <div class="tab-content tab-content-2">《三国演义》是中国古典四大名著之一，全名为《三国志通俗演义》。作者是元末明初小说家罗贯中，是中国第一部长篇章回体历史演义小说。描写了从东汉末年到西晋初年之间近105年的历史风云。全书反映了三国时代的政治军事斗争，反映了三国时代各类社会矛盾的转化，并概括了这一时代的历史巨变，塑造了一批叱咤风云的三国英雄人物。</div>    <!--tab section 3-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-3">    <label for="tab-radio-3" class="tab-handler tab-handler-3">西游记</label>    <div class="tab-content tab-content-3">《西游记》是中国古典四大名著之一，是由明代小说家吴承恩所创作的中国古代第一部浪漫主义的长篇神魔小说。主要描写了唐朝太宗贞观年间孙悟空、猪八戒、沙僧、白龙马四弟子保护唐僧西行取经，沿途历经九九八十一难，一路降妖伏魔，化险为夷，最后到达西天，取得真经的故事。取材于《大唐三藏取经诗话》和汉族民间传说。 [1] </div>    <!--tab section 4-->    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-4">    <label for="tab-radio-4" class="tab-handler tab-handler-4">红楼梦</label>    <div class="tab-content tab-content-4">《红楼梦》，中国古典四大名著之首，清代作家曹雪芹创作的章回体长篇小说[1] 。早期仅有前八十回抄本流传，八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本[2] ，定名《红楼梦》。亦有版本作《金玉缘》。</div>  </div></div>

HTML part is as above, four blocks, four classics, quack

html,body{  height: 100%;  margin: 0;  padding: 0;  background-color: #58596b;}.container{  width: 800px;  height: 400px;  margin: 100px auto;  background-color: #fff;  box-shadow: 0 1px 3px rgba(0,0,0,.1);}.tab-wrapper{  position: relative;  width: 800px;  height: 60px;  background-color: #33344a;}.tab-wrapper .tab-radio{  display: none;}.tab-handler{  position: relative;  z-index: 2;  display: block;  float: left;  height: 60px;  padding: 0 40px;  color: #717181;  font-size: 16px;  line-height: 60px;  transition: .3s;  transform: scale(.9);}.tab-radio:checked + .tab-handler{  color: #fff;  background-color: #e74c3c;  transform: scale(1);}.tab-radio:checked + .tab-handler + .tab-content{  visibility: visible;  opacity: 1;  transform: scale(1);}.tab-wrapper .tab-content{  visibility: hidden;  position: absolute;  top: 60px;  left: 0;  width: 740px;  padding: 30px;  color: #999;  font-size: 14px;  line-height: 1.618em;  background-color: #fff;  opacity: 0;  transition: transform .5s, opacity .7s;  transform: translateY(20px);}

CSS code is as above, badly written , lightly spray~
Using visibility opacity to control the display and hiding of elements is actually to achieve animation effects (there is a suspicion of pretentiousness here), because display will hinder the transition, but visibility will not. You can also use pointer-events opacity instead.

The code is just the above, and the jsbin address is attached: http://output.jsbin.com/cicadu
The test is perfect in the new version of opera/chrome/firefox, but there is a serious problem on safari, it seems to have been switched After tab, the style of the tab content block has been applied but it does not take effect. Visually, the page is not redrawn? Focus it in the developer tools before it takes effect. The specific reason is unknown. If anyone knows about it, please feel free to enlighten me.