圖1
圖2
圖3
就愛UI - 分享UI設計的點點滴滴
圖1
圖2-點擊切換
圖2-拖動切換
圖3
就愛UI - 分享UI設計的點點滴滴
您2019豬事順利,心想事成。
Tab 切換是種很常見的網頁呈現形式,不管是PC或者H5都會經常看到,今天就為小伙伴們提供多種純CSS Tab 切換的實現方式,同時對比一下那種代碼更方便,更通俗易懂。
3種純CSS方式實現Tab 切換
純CSS實現都面臨2個問題:
1、 如何接收點擊事件?
2、 如何操作相關DOM?
擁有 checked 屬性的表單元素, <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。
知識點:
1、 使用 radio 標簽的 :checked 偽類,加上 <label for> 實現純 CSS 捕獲點擊事情
2、 使用了 ~ 選擇符對樣式進行控制
<div class="container"> <input class="nav1" id="li1" type="radio" name="nav"> <input class="nav2" id="li2" type="radio" name="nav"> <ul class='nav'> <li class='active'><label for="li1">tab1</label></li> <li><label for="li2">tab2</label></li> </ul> <div class="content"> <div class="content1 default">tab1 內容:123456</div> <div class="content2">tab2 內容:abcdefgkijkl</div> </div> </div>
添加樣式
.container *{ padding: 0; margin: 0; } .container { position: relative; width: 400px; margin: 50px auto; } .container input { display: none; } .nav { position: relative; overflow: hidden; } .nav li { width: 200px; float: left; text-align: center; background: #ddd; list-style: none; } .nav li label { display: block; width: 200px; line-height: 36px; font-size: 18px; cursor: pointer; } .content { position: relative; overflow: hidden; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; padding: 10px; } .content1, .content2 { display: none; width: 100%; height: 100%; } .nav1:checked ~ .nav li { background: #ddd; color: #000; } .nav1:checked ~ .nav li:first-child { background: #ff7300; color: #fff; } .nav2:checked ~ .nav li { background: #ddd; color: #000; } .nav2:checked ~ .nav li:last-child { background: #ff7300; color: #fff; } .nav1:checked ~ .content > div { display: none; } .nav1:checked ~ .content > div:first-child { display: block; } .nav2:checked ~ .content > div { display: none; } .nav2:checked ~ .content > div:last-child { display: block; } .nav li.active { background: #ff7300; color: #fff; } .content .default { display: block; }
知識點:
1、 要使用 :target 偽元素,需要 HTML 錨點,以及錨點對應的 HTML 片段
2、 核心是使用 :target 偽類接收點擊事件
3、 通過兄弟選擇符 ~ 控制樣式
<div class="container"> <div id="content1" class="active">tab 1內容:123456</div> <div id="content2">tab 2內容:abcdefgkijkl</div> <ul class='nav'> <li class="active"><a href="#content1">tab1</a></li> <li><a href="#content2">tab2</a></li> </ul> <div class="wrap"></div> </div>
添加樣式
.container *{ padding: 0; margin: 0; } .container { position: relative; width: 400px; margin: 50px auto; } .nav { position: relative; overflow: hidden; } li { width: 200px; float: left; text-align: center; background: #ddd; list-style: none; } li a { display: block; width: 200px; line-height: 36px; font-size: 18px; cursor: pointer; text-decoration: none; color: #000; } #content1, #content2 { position: absolute; overflow: hidden; top: 36px; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; padding: 10px; } #content1, #content2 { display: none; width: 100%; background: #fff; } #content1:target, #content2:target { display: block; } #content1.active { display: block; } .active ~ .nav li:first-child { background: #ff7300; color: #fff; } #content1:target ~ .nav li { background: #ddd; color: #000; } #content1:target ~ .nav li:first-child { background: #ff7300; color: #fff; } #content2:target ~ .nav li { background: #ddd; color: #000; } #content2:target ~ .nav li:last-child { background: #ff7300; color: #fff; } .wrap { position: absolute; overflow: hidden; top: 36px; width: 400px; height: 100px; border: 1px solid #999; box-sizing: border-box; }
:focus-within 它表示一個元素獲得焦點,或該元素的后代元素獲得焦點。
重點:它或它的后代獲得焦點。
這也就意味著,它或它的后代獲得焦點,都可以觸發 :focus-within。
知識點
1、 這個屬性有點類似 Javascript 的事件冒泡,從可獲焦元素開始一直冒泡到根元素 html,都可以接收觸發 :focus-within 事件
2、 本例子的思路就是通過獲焦態來控制其他選擇器,以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式
<div class="container"> <div class="nav-box"> <button class="nav1">tab1</button> <button class="nav2">tab2</button> <div class="content-box"> <div class="content1"> content-1 </div> <div class="content2"> content-2 </div> </div> </div> </div>
添加樣式
.container { width: 300px; margin: 50px auto; padding: 10px; boder: 1px solid #ddd; } .nav-box { font-size: 0; } button { width: 150px; height: 40px; box-sizing: border-box; outline: none; background: #fff; border: 1px solid #ddd; font-size: 18px; cursor: pointer; } button:focus-within { color: #fff; background: #ff7300; } .content-box { font-size: 24px; border: 1px solid #ddd; height: 100px; } .content-box div { display: none; } .nav-box:not(:focus-within) .nav1 { color: #fff; background: #ff7300; } .nav-box:not(:focus-within) .content1 { display: block; } .nav1:focus-within ~ .content-box .content1 { display: block; } .nav2:focus-within ~ .content-box .content2 { display: block; }
3種純CSS方式實現Tab 切換
這個效果就很差一些,因為,在tab失去焦點時,就會復原,回到tab1上面,并不推薦這種方式來實現。小編推薦第一種:checked實現方式,更容易理解。
喜歡小編的點擊關注,了解更多知識!
源碼地址和源文件下載請點擊下方“了解更多”
*請認真填寫需求信息,我們會在24小時內與您取得聯系。