1. 入门屋首页
  2. 建站入门

纯CSS3制作TAB选项卡

小屋 • • 建站入门 • 阅读 720

这个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)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
小屋小屋认证管理
0 0
上一篇 2020-10-26 21:36
下一篇 2020-10-27 11:37

相关推荐

  • 大前端和小前端的区别 建站入门

    大前端和小前端的区别

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

    小屋 小屋
    2022-02-07
    3070
  • 纯CSS实现点击展开全文功能 建站入门

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

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

    小屋 小屋
    2020-10-26
    2.6K0
  • Typecho使用指南 – 主题&插件 建站入门

    Typecho使用指南 – 主题&插件

    前言 自从买VPS，就一直研究还可以做些什么？于是，我想到自己搭建个博客，上网看看了，感觉Typecho,挺不错的。故写下此篇博客。 准备 Typecho 安装 下载Typecho压缩包,上传服务器wwwroot下，把所有文件解压出来。 进入数据库中，创建一个typecho的数据库。 在浏览器中访问您的域名将自动跳转到安装地址（记得要绑定域名），点击“我准备…

    小屋 小屋
    2018-11-12
    5.9K0
  • 织梦CMS通用安装教程 建站入门

    织梦CMS通用安装教程

    今天先跟大家介绍一下dedecms织梦系统安装的方法步骤，以及织梦数据库还原的教程。详细请看图文讲解：1.运行 http://域名/install/index.php(比如你的域名是：http://www.rumenwu.com/，就输入http://www.rumenwu.com/install/index.php) （注）输入网址 http://域名/i…

    小屋 小屋
    2018-03-08
    1.8K0
  • 首页改版方法总结：服务市场首页改版项目 建站入门

    首页改版方法总结：服务市场首页改版项目

    首页改版一般由以下几种原因引起 业务策略变化 品牌升级 年久失修，体验变差 换了老板，嘿嘿 首页改版一般想要达到的目标 业务策略变化引起的内容变化，从而为用户提供更加丰富、更加精准的内容和服务 品牌升级引起的内容变化，从而在原有用户的体感上新增品牌增益的内容 年久失修导致用户流失严重，通过内容和服务的变化提升用户的留存和转化 感受： 换个品牌LOGO，改个页…

    小屋 小屋
    2018-04-01
    2.4K0
  • WordPress响应式主题添加视频手机端不显示问题解决办法 建站入门

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

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

    小屋 小屋
    2018-10-16
    2.5K0
首页
社区
我的