纯CSS3制作TAB选项卡

2个月前 教程分享 98°C

这篇文章最后更新于09-23 18:05前,您需要注意相关的内容是否还可用,如有疑问请联系作者!

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

第一种::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代码如下:

此处内容需要评论回复后方可阅读。

版权说明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。
本文链接:https://huue.cc/index.php/archives/1412.html
最后编辑: 21年09月23日

随机内容

网友评论

1周前

感觉ci更简单轻便。

2周前

wwwww

3周前

支持awa

4周前

可以可以

1个月前

看看

2个月前

看一下