純CSS實現Tab欄的切換

時間 2019-11-24

標籤 css 實現 tab 切換欄目 CSS 简体版

原文原文鏈接

思路

利用input標籤的radio類型中的checked屬性控制當前選中tab
隱藏radio的顯示，用label標籤的for屬性關聯radio，對label進行樣式編寫實現tab欄的自定義。
一個tab對應一個列表，全部列表初始化作隱藏顯示。
tab和列表同級顯示，才能經過下列選擇器結合去找選中tab對應列表

屬性選擇器'[]'
:checked選擇器
兄弟選擇器'~'
相鄰兄弟選擇器'+'

完整例子

<html>
    <head>
      <title>app下載</title>
      <meta charset="UTF-8">
      <meta content=yes name=apple-mobile-web-app-capable />
      <meta content=yes name=apple-touch-fullscreen />
      <meta content="telephone=no,email=no" name=format-detection />
      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    	<style media="screen"> .download { font-size:0; padding: 0 20px; } header { font-size: 18px; padding: 20px 0; border-bottom: 2px solid #e37430; margin-bottom: 5px; } label { display: inline-block; text-align: center; width: 80px; height: 40px; line-height: 40px; background-color: #dcdcdc; color: #000; font-size: 16px; margin-bottom: 1px; } input[type="radio"] { display: none; } input[type="radio"]:checked + label { background-color: #e37430; color: #fff; } input[type="radio"][data-type="mmcm"]:checked ~ .mmcm { display: table; } input[type="radio"][data-type="cmt"]:checked ~ .cmt { display: table; } table { width: 100%; border-bottom: 5px solid #e37430; display: none; font-size: 14px; } table th { background-color: #e37430; color: #fff; height: 33px; line-height: 33px; text-align: center; } table tr { text-align: center; } table tr td { padding: 20px 0; } .btn { height: 20px; line-height: 20px; display: block; width: 80px; margin: 0 auto; background-color: #b1b2b3; border-radius: 4px; color: #000; } .version { color: green; } .signature { color: red; } </style>
    </head>
    <body>
    	<div class="download">
    		<header>安裝包平臺</header>
    		<input id="project-mmcm" name="project" type="radio" checked="checked" data-type="mmcm">
    		<label for="project-mmcm">安卓</label>
    		<input id="project-cmt" name="project" type="radio" data-type="cmt">
    		<label for="project-cmt">iOS</label>
    		<table class="mmcm">
    			<thead>
    				<tr>
    					<th>簽名</th>
    					<th>安裝地址</th>
    					<th>版本號</th>
    					<th>發售日期</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td class="signature">test1</td>
    					<td><a class="btn" href="http://www.baidu.com">下載安裝</a></td>
    					<td class="version">v1.0</td>
    					<td>2018-11-15</td>
    				</tr>
    			</tbody>
    		</table>
    		<table class="cmt">
    			<thead>
    				<tr>
    					<th>簽名</th>
    					<th>安裝地址</th>
    					<th>版本號</th>
    					<th>發售日期</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr>
    					<td class="signature">test2</td>
    					<td><a class="btn" href="http://www.baidu.com">下載安裝</a></td>
    					<td class="version">v1.0</td>
    					<td>2018-11-15</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </body>
</html>
複製代碼

注意事項:由於tab要橫向排布，因此label標籤的display設置成inline-blockcss

inline-block存在的小問題：

用了display:inline-block後，存在間隙問題，間隙爲4像素，這個問題產生的緣由是換行引發的，由於咱們寫標籤時一般會在標籤結束符後順手打個回車，而回車會產生回車符，回車符至關於空白符，一般狀況下，多個連續的空白符會合併成一個空白符，而產生「空白間隙」的真正緣由就是這個讓咱們並不怎麼注意的空白符。html
去除空隙的方法：對父元素添加{font-size:0}，即將字體大小設爲0那麼那個空白符也變成0px從而消除空隙web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。