纯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日 下午9:36
下一篇 2020年10月27日 上午11:37

相关推荐

  • 百度移动搜索落地页体验白皮书——广告篇3.0

    1.  百度坚决捍卫移动搜索用户体验 2.  名词解释 2.1.广告 2.2.APP引导 2.3.主体内容 2.4.首屏 2.5.一屏 3.  落地页广告规范 3.1.禁止的广告样式 3.2.广告位置以及面积 3.3.广告内容 3.4.注意规范 1. 百度坚决捍卫移动搜索用户体验 2017年初,百度用户体验部针对用户进行了满意度调研,发现很多恶意低质的广告严…

    建站入门 2018年3月10日
    98900
  • 升级WordPress 5.0后,切换回经典编辑器Classic Editor

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

    2018年12月15日
    1.0K00
  • 做网站该注意哪些基本要素?

    以下内容参考Google对网站管理员的建议,适当的地方我们已经添加注解。 设计与内容指南 网站应具有清晰的层次结构和文本链接。每个网页应至少可以通过一个静态文本链接打开。文本链接不同于通过javascript等其他代码生成的链接。如本文下面的“打印”即不是通过文本链接实现。 为用户提供网站地图,列出指向网站重要部分的链接。如果网站地图上的链接超过或大约为 1…

    建站入门 2018年2月10日
    1.1K00
  • 大前端和小前端的区别

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

    建站入门 2022年2月7日
    1.2K00
  • SEO一般有哪些步骤或环节?

    搜索引擎优化SEO一般有哪些步骤或环节? SEO并不是简单的几个秘诀或几个建议,而是一项需要足够耐心和细致的脑力劳动。大体上,SEO包括六个环节: 1、关键词分析(也叫关键词定位) 这是进行SEO最重要的一环,关键词分析包括:关键词搜索量分析、竞争对手分析、关键词与项目相关性分析、关键词布置、关键词排名预测。 2、网站架构分析 网站结构符合搜索引擎的爬虫喜好…

    建站入门 2018年1月23日
    96100

发表回复

登录后才能评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信