纯css实现选项卡

最新推荐文章于 2024-06-02 16:43:03 发布

SeanHit

最新推荐文章于 2024-06-02 16:43:03 发布

阅读量1.3k

点赞数 2

分类专栏：前端 css+html 文章标签： css3 css html5

本文链接：https://blog.csdn.net/l_x_cser/article/details/104418002

版权

前端 css+html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

纯css实现一个选项卡

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <style>
		body{
			padding: 100px;
		}
       *{
		   margin: 0;
		   padding: 0;
	   }
	   .clear{
		   clear: both;
	   }
	   ul{
		   list-style-type: none;
	   }
	   a{
			float: left;
			border: 1px solid orange;
			background-color: pink;
			width: 100px;
			text-decoration: none;
			box-sizing: border-box;
	   }
	   a:hover{
		   background-color: red;
	   }
	   .content {
		   width: 300px;
		   height: 300px;
		   background-color: deeppink;
		   overflow: hidden;
	   }
	   .content div{
		   width: 100%;
		   height: 100%;
	   }
    </style>
</style>
</head>
<body>
    <div class="tab">
		<ul>
			<li><a href="#con1">菜单一</a></li>
			<li><a href="#con2">菜单二</a></li>
			<li><a href="#con3">菜单三</a></li>
		</ul>
	</div>
	<div class="content clear">
		<div id="con1">选项卡1......</div>
		<div id="con2">选项卡2......</div>
		<div id="con3">选项卡3......</div>
	</div>
</body>
</html>

在这里插入图片描述

总结重点

a标签href="#id" 这里链接对应的选项快
将选项内容大的div容器设置宽高度，超出部分隐藏。这样每次选中对应的选项区，则会跳转到该选项块
可以先将overflow设置为auto看看是如何工作的

SeanHit

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯css实现选项卡

纯css实现一个选项卡先看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>演示文档</title> <style> body{ padding: 100px; } ...
复制链接

扫一扫