纯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 21:36
下一篇 2020-10-27 11:37

相关推荐

  • WordPress响应式主题添加视频手机端不显示问题解决办法

    随着移动互联网的发展,现在手机端的流量占比越来越大,响应式主题由于兼容PC和移动端以及部署方便等优点也被广大站长使用接受,不过由于电脑和手机系统兼容性的问题,很多用户遇到视频播放的问题:在网站添加的视频在电脑上可以正常播放,一到手机上就无法显示。 问题原因 电脑上一般都会安装flash控件,视频大多也是使用flash播放器来播放的,而手机端目前网页播放视频都…

    2018-10-16
    2.7K0
  • 怎样迁移网站服务器和域名?

    继续回答有普遍性的问题。今天是一个网站服务器和域名迁移的问题。 读者Pete Zhang问: Zac你好,占用你的宝贵时间,向你请教个问题。想要迁移网站,内容基本不变,但域名不同,服务器也不同,我该如何是好? 问题描述:我经营一个小公司,公司有一个网站(域名假设是www.AAA.com),网站的服务器在美国(IP假设是1.1.1.1)。公司的所有业务都来自w…

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

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

    2018-02-08
    2.2K0
  • WordPress代码实现 外链图片 自动本地化

    WordPress的许多插件或代码可以在编辑文章时自动将外部图片下载到本地。 最后,我选择了一个名为Easy Copy Paste的插件。 单个操作之后,您只需单击更新按钮即可编辑文章,以将文章中的外部链接图像下载到本地并替换链接。但是,逐篇编辑文章不仅麻烦,而且工作量很大。 这是您可以批量下载文章中外部图片的一个小技巧。批处理操作该插件的代码不仅可以通过单…

    2022-04-10
    5890
  • 大前端和小前端的区别

    1、小前端指的是Web前端,从浏览器端到web服务器端的所有开发; 2、而大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。 大前端是web统一的时代,利用…

    2022-02-07
    6260
  • 纯css实现移动端水平滚动导航

    目前最简单呈现效果最好的纯css实现移动端水平滚动导航解决方案。 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title></title> <meta name=”viewport” content…

    2020-10-27
    1.0K0