移动端tab切换时下划线的滑动效果

最新推荐文章于 2023-08-01 14:08:05 发布

BetterGG

最新推荐文章于 2023-08-01 14:08:05 发布

阅读量9.4k

点赞数 3

分类专栏： css 文章标签： tab 下划线

本文链接：https://blog.youkuaiyun.com/BetterGG/article/details/81390111

版权

css 专栏收录该内容

22 篇文章

订阅专栏

本篇会放置多种下划线滑动效果，一篇一篇增加，更新中

1、当前 tab 出现下划线的同时，前一个下划线同时消失（出现方向与消失方向保持一致），伴随过渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>change tab</title>
	<style>
		ul {
		  display: flex;
		  position: absolute;
		  width: 800px;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  list-style: none;
		}
		li {
		  position: relative;
		  padding: 20px;
		  color: #000;
		  line-height: 1;
		  transition: 0.2s all linear;
		  cursor: pointer;
		}
		li::before {
		  content: "";
		  position: absolute;
		  top: 0;
		  left: 100%;
		  width: 0;
		  height: 100%;
		  border-bottom: 2px solid #f00;
		  transition: 0.2s all linear;
		}

		li:active {
		  background: #000;
		  color: #fff;
		}

		.active ~ li::before {
		  left: 0;
		}
		.active::before {
		  width: 100%;
		  left: 0;
		  top: 0;
		}
		.hover::before{
			width: 200%;
		}
	</style>
</head>
<body>
	<ul>
	  <li class="active tab" data-index='0'> 张杰 </li>
	  <li class="tab" data-index='1'>周杰伦</li>
	  <li class="tab" data-index='2'>林俊杰</li>
	  <li class="tab" data-index='3'>薛之谦</li>
	  <li class="tab" data-index='4'>你</li>
	</ul>
</body>
<script>
	var lis = document.getElementsByClassName('tab');
	for(var i=0; i<lis.length; i++){
		lis[i].onclick = function(){
			var that = this;
			for(var i=0; i<lis.length; i++){
				lis[i].classList.remove('active')
				this.classList.add('active')
			}
		}
	}
</script>
</html>