纯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

相关推荐

  • 纯CSS实现点击展开全文功能

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

    2020-10-26
    3.4K0
  • 怎么解决WordPress更新时,提示无法连接到FTP服务器?

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

    2018-02-08
    2.4K0
  • 纯css实现移动端水平滚动导航

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

    2020-10-27
    1.2K0
  • 大前端和小前端的区别

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

    2022-02-07
    9710
  • 政府网站建设网页设计规范

    政府网站要方便公众浏览使用,页面内容要便于复制、保存和打印。要最大限度减少用户额外安装组件、控件或插件;确需使用的,要便于在相关页面获取和安装。应用系统、附件、视频等应有效可用,名称要直观准确。附件、视频等格式应便于常用软件打开,避免用户额外安装软件。避免使用悬浮、闪烁等方式,确需使用悬浮框的必须具备关闭功能。 1.首页不宜过长。在主流计算机配置和当地平均网…

    2020-11-08
    1.8K0
  • 升级WordPress 5.0后,切换回经典编辑器Classic Editor

    升级WordPress 5.0后,切换回经典编辑器Classic Editor WordPress 5.0 正式采用了全新的区块编辑器-古德堡编辑器Block Editor Gutenberg,对于很多已经习惯国产编辑器习惯的站长来说不是特别方便,下面我们看看如何切换成经典编辑器吧。   相信有不少人不太习惯新编辑器的使用,那么在更新了WordPress 5…

    2018-12-15
    2.3K0