纯CSS3制作TAB选项卡

这个CSS3 Tab样式已经写出来很久了,一直没有时间把它分享出来,也许网上还有其他很多这样子的代码,但没有一种是用到我说的:checked来做的,不管如何,多掌握一种方式对你也是有帮助的。 效果就如博客之前写过的一个Tab一样:有最新文章、热门文章和随机文章。

css3-tab1

第一种::checked

首先像平常写HTML和CSS一样,不过要使用input的radio来做为点击后选择的内容。通过input:checked来隐藏和显示需要对应的内容。 HTML代码如下:

<div class="widget widget-tab">
<input type="radio" name="widget-tab" id="new" checked="checked"/>
<input type="radio" name="widget-tab" id="hot"/>
<input type="radio" name="widget-tab" id="random"/>
<div class="widget-title inline-block">
<ul>
<li class="new">
<label for="new">最新博文</label>
</li>
<li class="hot">
<label for="hot">热评博文</label>
</li>
<li class="random">
<label for="random">随机博文</label>
</li>
</ul>
</div>
<div class="widget-box">
<ul class="new-list">
<li>……</li>
</ul>
<ul class="hot-list">
<li>……</li>
</ul>
<ul class="random-list">
<li>……</li>
</ul>
</div>
</div>

注意点:有几个标签页,就需要对应添加几个input,同时每个input的name必须设置为一致,同时这些input必须放在最前面,通过选择后来使用CSS3的同级元素链接符来改变样式。而Tab里面的“最新博文、热评博文、随机博文”都要用label包围起来,配上相对应的for. CSS代码如下:

.widget-tab input{display:none}
.widget-tab .widget-box ul{display:none}
#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#F7F7F7}
#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}

作者:小屋
链接:http://www.rumenwu.com/site/1586.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(4)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2020-10-26
下一篇 2020-10-27

相关推荐

  • 怎么解决WordPress更新时,提示无法连接到FTP服务器?

    怎么解决WordPress更新时,提示无法连接到FTP服务器?在 WordPress 目录下找到 wp-config.php 文件并编辑,在最后一行加上define(‘FS_METHOD’, “direct”);

    2018-02-08
    2.6K0
  • Apache伪静态规则文件.htaccess的另类用法

    1、开启/关闭拼写检查(关闭后会区分大小写) CheckSpelling On #开启 CheckSpelling Off #关闭 关闭拼写检查可以解决一下报错 2、禁止/只允许特定IP访问 (1) 禁止单个IP访问,例如192.168.1.1 Order Allow,Deny Allow from all Deny from 192.168.1.1 (2)…

    2019-10-06
    3.4K0
  • 使用CSS3实现表格隔行/隔列变色

    废话少说,先看效果,如果不是你想要的,你可以撤了~ 这些都是css控制的,然后我们看下样式: table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73B1E0;color:#FF…

    2020-11-18
    2.9K0
  • WordPress七牛云静态文件CDN加速配置教程

    WordPress网站优化加速一直都是广大站长比较关注的问题,今天主要介绍一下基于七牛云的静态文件(比如图片、js、css)CDN加速的设置方法。 CDN还是对象储存? 目前我们接触到的很多客户都是基于第三方插件对接的对象存储服务,这个本身其实也是没什么问题的,不过接触下来发现很多用户经常会遇到插件选择、文件同步、缩略图生成等各种问题,所以我们更推荐的是CD…

    2018-11-02
    3.1K0
  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

    随着HTTPS的不断普及,越来越多的网站开启了HTTPS,给网站加上了小绿锁标识,作为全球知名的建站系统,WordPress对于HTTPS的兼容性是非常好的,几乎不用任何修改,只需要服务器配置好证书即可使用https链接访问。但是经常有用户反馈开启了以后地址栏没有绿色的锁(chrome浏览器),下面简单介绍下配置教程。 以下配置教程是基于已经在服务器配置好S…

    2018-04-15
    3.0K0
  • 纯CSS实现点击展开全文功能

    看标题大家不难猜到我今天要实现的功能,点击展开全文。 CSS :checked伪类选择器 思路是使用checkbox的:checked来做隐藏和显示。跟上面这个CSS Tab使用radio来实现是差不多的。当点击label标签时,会绑定同步点击 “for” 属性值为 “checkbox” 的 “id…

    2020-10-26
    3.7K0