純CSS實現Tab欄的切換

卸帳篷的黑人發表於2018-11-21
CSS

思路

  1. 利用input標籤的radio型別中的checked屬性控制當前選中tab
  2. 隱藏radio的顯示，用label標籤的for屬性關聯radio，對label進行樣式編寫實現tab欄的自定義。
  3. 一個tab對應一個列表，所有列表初始化做隱藏顯示。
  4. 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-block

inline-block存在的小問題：

  • 用了display:inline-block後，存在間隙問題，間隙為4畫素，這個問題產生的原因是換行引起的，因為我們寫標籤時通常會在標籤結束符後順手打個回車，而回車會產生回車符，回車符相當於空白符，通常情況下，多個連續的空白符會合併成一個空白符，而產生“空白間隙”的真正原因就是這個讓我們並不怎麼注意的空白符。

  • 去除空隙的方法： 對父元素新增{font-size:0}，即將字型大小設為0那麼那個空白符也變成0px從而消除空隙

相關文章