对Tab切换效果的意淫

最新推荐文章于 2021-09-14 16:37:35 发布

骆天一

最新推荐文章于 2021-09-14 16:37:35 发布

阅读量295

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 技术 html

本文链接：https://blog.youkuaiyun.com/luotianyi1205/article/details/78532360

css 专栏收录该内容

8 篇文章

订阅专栏

标题是不是有点俗话说，男人本色，哈哈哈好了不多逼逼了开始今天的主题

我们常见的TAB切换都是中规中矩的，但是项目中用到了这样的切换

嘿嘿，不好意思啊，动画做快了，我描述下吧，就是像一个一个块元素去掉底部标签就是这样子啦

怎么实现这样的效果，Tab切换之无底边效果，我们先来分析下，首先先做一个三个块元素来实现切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#big div{
				 width: 120px;
				  height:40px;
				   background: burlywood;
				   float: left;
				   font-size: 12px;
				   text-align: center;
				    line-height: 40px;
			}
		</style>
	</head>
	<body>
		 <div id="big">
		 	<div class="dd">
		 		今日
		 	</div>
		 		<div style="margin-left: 20px;">
		 		7天
		 	</div>
		 		<div style="margin-left: 20px;">
		 		30天
		 	</div>
		 	
		 </div>
	</body>
</html>

我们使用JQ来实现动态切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			#big div{
				 width: 120px;
				  height:40px;
				   background: burlywood;
				   float: left;
				   font-size: 12px;
				   text-align: center;
				    line-height: 40px;
			}
			#big .dd{
				 border-top: 3px solid darkgray;
				  border-left: 3px solid darkgray;
				   border-right: 3px solid darkgray;
				     border-bottom:transparent;   //此处代码的边框变成透明
			}	
					</style>
	</head>
	<body>
		 <div id="big">
		 	<div class="dd">
		 		今日
		 	</div>
		 		<div style="margin-left: 20px;">
		 		7天
		 	</div>
		 		<div style="margin-left: 20px;">
		 		30天
		 	</div>
		 	
		 </div>
	</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.3.min.js">
	
</script>

<script>
	 $("#big div").click(function(){
	 	$(this).addClass("dd").siblings().removeClass("dd")
	 })
	
	
</script>

效果

下面我们做一个大div来模拟切换下面的内容

做到这里了坚持下就差最后一步了，我们实现了模拟内容，但是我们发现与上面三个的切换重叠了，我们怎样做到想要的效果呢，很简单我们把切换的大容器层级变高并且做成背景是白色的不就行了（如果不设背景颜色默认是透明的）效果图如下：

完整代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#big {
				width: 500px;
				height: 40px;
				background: white;
			}
			
			#big div {
				width: 120px;
				height: 40px;
				background: white;
				float: left;
				font-size: 12px;
				text-align: center;
				line-height: 40px;
				margin-left: 20px;
				z-index:1;
				position: relative;
			}
			
			#big .dd {
				border-top: 3px solid darkgray;
				border-left: 3px solid darkgray;
				border-right: 3px solid darkgray;
			}
			
			.new {
				width: 500px;
				height: 500px;
				margin-top:2px;
				border-top: 1px solid darkgray;
				
			}
		</style>
	</head>

	<body>
		<div id="big">
			<div class="dd">
				今日
			</div>
			<div style="margin-left: 20px;">
				7天
			</div>
			<div style="margin-left: 20px;">
				30天
			</div>

		</div>
		<div class="new">

		</div>
	</body>

</html>
<script type="text/javascript" src="js/jquery-1.11.3.min.js">
</script>

<script>
	$("#big div").click(function() {
		$(this).addClass("dd").siblings().removeClass("dd")
	})
</script>

最后的小插曲：下班了，我的赶紧走了，要不门卫又该粘人了，赶紧发工资吧，我就剩18了