用純CSS實現優雅的tab頁

Ali_ 發布于2019-08-01 14:48 / 1787人閱讀

摘要：部分如上，四個區塊，四大名著，嘎嘎代碼如上，寫的很爛，輕噴用來控制元素的顯示和隱藏，實際上是為了實現動畫效果此處有裝逼的嫌疑，因為會阻礙，而不會，另外也可以用來代替。

說明

又是一個練手的小玩意兒，本身沒什么技術含量，就是幾個不常用的CSS3特性的結合而已。

要點

Label標簽的for屬性

單選框的:checked偽類

CSS的加號[+]選擇器

效果圖

原理

通常tab頁的交互都是點擊tab頭然后展示對應的一塊內容，這種排他性跟HTML里面的某個原住民很類似，是啥呢？沒錯！就是單選框組。

單選框組有一個:checked偽類，可以設定單選框被選中后的樣式，所以我們要把一組單選框當做tab頁的頭部么？當然不是，單選框是很固執的，用CSS去感化他是很吃力的，那怎么辦呢？

這里就要用到CSS里面的+選擇器了[實際上這個選擇器我之前從來沒用過-_-||]，簡單來說+選擇器就是選擇緊跟在某個指定元素后面的另一個指定的元素，具體介紹請看 http://www.w3school.com.cn/cs...

Label的for屬性是一個很有意思的東西，可以理解為一個遙控器：位于頁面底部的一個label標簽可以通過for屬性來控制頁面頂部的一個單選框或者復選框~，是不是很神奇？（噗→_→）

結合以上特點，可以得到一個實現tab頁的基本思路：

一個單選按鈕后面跟一個lable[tab頭]，再后面跟上一個div[tab內容塊]
用.radio:checked + .tab-header 指定當前tab頭的樣式
用.radio:checked + .tab-header + .tab-content 指定當前tab內容塊的樣式

代碼


  
    
    
    水滸傳
    《水滸傳》是中國歷史上第一部用古白話文寫成的歌頌農民起義的長篇章回體版塊結構小說，以宋江領導的起義軍為主要題材，通過一系列梁山英雄反抗壓迫、英勇斗爭的生動故事，暴露了北宋末年統治階級的腐朽和殘暴，揭露了當時尖銳對立的社會矛盾和“官逼民反”的殘酷現實。按120回本計，前70回講述各個好漢上梁山，后50回主要為宋江全伙受招安為朝廷效力，以及被奸臣所害。
    
    
    三國演義
    《三國演義》是中國古典四大名著之一，全名為《三國志通俗演義》。作者是元末明初小說家羅貫中，是中國第一部長篇章回體歷史演義小說。描寫了從東漢末年到西晉初年之間近105年的歷史風云。全書反映了三國時代的政治軍事斗爭，反映了三國時代各類社會矛盾的轉化，并概括了這一時代的歷史巨變，塑造了一批叱咤風云的三國英雄人物。
    
    
    西游記
    《西游記》是中國古典四大名著之一，是由明代小說家吳承恩所創作的中國古代第一部浪漫主義的長篇神魔小說。主要描寫了唐朝太宗貞觀年間孫悟空、豬八戒、沙僧、白龍馬四弟子保護唐僧西行取經，沿途歷經九九八十一難，一路降妖伏魔，化險為夷，最后到達西天，取得真經的故事。取材于《大唐三藏取經詩話》和漢族民間傳說。 [1] 
    
    
    紅樓夢
    《紅樓夢》，中國古典四大名著之首，清代作家曹雪芹創作的章回體長篇小說[1] 。早期僅有前八十回抄本流傳，八十回后部分未完成且原稿佚失。原名《脂硯齋重評石頭記》。程偉元邀請高鶚協同整理出版百二十回全本[2] ，定名《紅樓夢》。亦有版本作《金玉緣》。

HTML部分如上，四個區塊，四大名著，嘎嘎

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代碼如上，寫的很爛，輕噴~
用visibility+opacity來控制元素的顯示和隱藏，實際上是為了實現動畫效果（此處有裝逼的嫌疑），因為display會阻礙transition，而visibility不會，另外也可以用pointer-events+opacity來代替。

代碼就上面那些了，另附jsbin地址：http://output.jsbin.com/cicadu/4
在新版opera/chrome/firefox測試完美，safari上面有嚴重問題，貌似切換了tab之后，tab內容塊的樣式已經應用了然而卻沒有生效，目測頁面沒有重繪？在開發者工具里面將其focus一下才生效，具體原因未知，有哪位大神知道的請不吝賜教。

GPU云服務器云服務器 tab頁實現 Tab頁 Tab頁界面 tab頁html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49595.html

用純CSS實現優雅的tab頁

摘要：部分如上，四個區塊，四大名著，嘎嘎代碼如上，寫的很爛，輕噴用來控制元素的顯示和隱藏，實際上是為了實現動畫效果此處有裝逼的嫌疑，因為會阻礙，而不會，另外也可以用來代替。說明又是一個練手的小玩意兒，本身沒什么技術含量，就是幾個不常用的CSS3特性的結合而已。要點 Label標簽的for屬性單選框的:checked偽類 CSS的加號[+]選擇器效果圖 showImg(https...

lavnFan 2019-08-28 18:13 評論0 收藏0
用純css實現Tab切換

摘要：所以當我們思考能否用來實現時還應考慮到的結構，能不能構造出滿足已存在的選擇器的布局。用來實現的好處就是可以盡量大的把組件功能和業務邏輯分離開來，真正做一個組件該做的事，希望越來越好我們今天用css來實現一個常見的tab切換效果查看原文可以有更好的排版效果哦先看效果 https://codepen.io/xboxyan/pe... 前言哪些簡單的效果可以考慮用css來實現呢，目前...

hizengzeng 2019-08-30 15:54 評論0 收藏0
用CSS實現Tab頁切換效果

摘要：綁定和這個不用說和屬性綁定隱藏按鈕這個方法有很多充分發揮你們的想象力就可以了，我見過的方法有設置隱藏的設置絕對定位，將設置為很大的負值，移動到頁面外達到隱藏效果設置絕對定位使元素脫離文檔流，然后設置為透明來達到隱藏效果。用CSS實現Tab切換效果最近切一個頁面的時候涉及到了一個tab切換的部分，因為不想用js想著能不能用純CSS的選擇器來實現切換效果。搜了一下大致有下面三種寫法。 ...

dayday_up 2019-08-30 14:10 評論0 收藏0
用CSS實現Tab頁切換效果

摘要：綁定和這個不用說和屬性綁定隱藏按鈕這個方法有很多充分發揮你們的想象力就可以了，我見過的方法有設置隱藏的設置絕對定位，將設置為很大的負值，移動到頁面外達到隱藏效果設置絕對定位使元素脫離文檔流，然后設置為透明來達到隱藏效果。用CSS實現Tab切換效果最近切一個頁面的時候涉及到了一個tab切換的部分，因為不想用js想著能不能用純CSS的選擇器來實現切換效果。搜了一下大致有下面三種寫法。 ...

Warren 2019-08-26 11:49 評論0 收藏0