纯CSS实现Tab栏的切换

时间  2019-11-24
标签 css 实现 tab 切换 栏目 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-blockcss

inline-block存在的小问题：

  • 用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的缘由是换行引发的，由于咱们写标签时一般会在标签结束符后顺手打个回车，而回车会产生回车符，回车符至关于空白符，一般状况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正缘由就是这个让咱们并不怎么注意的空白符。html

  • 去除空隙的方法： 对父元素添加{font-size:0}，即将字体大小设为0那么那个空白符也变成0px从而消除空隙web

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程