纯css实现选项卡

最新推荐文章于 2025-08-18 09:14:32 发布

原创最新推荐文章于 2025-08-18 09:14:32 发布 · 1.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

不一样的前端专栏收录该内容

59 篇文章

订阅专栏

本文介绍了如何仅使用CSS来创建选项卡功能。通过简单的CSS代码，实现了选项卡的切换效果，无需借助JavaScript或其他编程语言。

纯css实现选项卡

效果如下：
在这里插入图片描述

其实用css实现选项卡是非常简单的

css中

.box{width: 302px;height: 302px;border-top: 1px solid gainsboro;text-align: center;margin: 0 auto;}
.box nav{width: 300px;height: 30px;border-bottom: 2px solid gainsboro;}
.box nav a{display: block;width: 100px;flex-shrink: 28px;line-height: 28px;float: left;}
.box .content{width: 300px;height: 270px;overflow: hidden;}
.box .content .cont{width: 300px;height: 270px;line-height: 270px;font-size: 40px;color: white;}
.box .content #one{background: #2E8B57;}
.box .content #two{background: #7CFC00;}
.box .content #three{background: #F4A460;}

body中

<div class="box">
	<nav>
		<a href="#one">按钮1</a>
		<a href="#two">按钮2</a>
		<a href="#three">按钮3</a>
	</nav>
	<div class="content">
		<div id="one" class="cont">内容1</div>
		<div id="two" class="cont">内容2</div>
		<div id="three" class="cont">内容3</div>
	</div>
</div>

就是这么的简单~