element tab栏底部线条滑动到置顶位置源码修改简易版_修改element tabs名称, tab滑不到最前面-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.tabs {
				display: flex;
				align-items: center;
				position: relative;
			}

			.tab-item {
				height: 30px;
				line-height: 30px;
				padding: 0 30px;
				font-size: 16px;
				color: #000;
			}
            .tab-item:first-child{
				padding-left: 0;
			}
			.line {
				position: absolute;
				left: 0;
				bottom: 0;
				background: red;
				height: 5px;
				transition: all 0.3s linear;
			}
		</style>
	</head>
	<body>
		<div class="tabs">
			<div class="tab-item active">第1个选项</div>
			<div class="tab-item">第2个选项长了</div>
			<div class="tab-item">第3个短</div>
			<div class="tab-item">第4个选项</div>
			<div class="tab-item">第5个选项非常非常非常长！！</div>
			<div class="line"></div>
		</div>

		<script>
		   // 初始化网页 
			window.addEventListener('load', function() {
				tabLineFn()
			});
			//点击各个tab
            let tab = document.querySelector('.tabs')
			tab.addEventListener('click',(e)=>{
				let tab = e.target;
				let tabs = document.querySelectorAll('.tab-item')
				tabs.forEach(item =>{
					item.classList.remove('active')
					
				})
			    tab.classList.add('active')
				tabLineFn()
			})
			
			// 滚动方法
			function tabLineFn() {
				let style = {};
				let offset = 0;
				let tabSize = 0;
                // every 是数组的方法 所以转为数组
				let tabs =[...document.querySelectorAll('.tab-item')] 
				// 使用every 是为了 只计算到 当前激活项 return false 就可以退出循环
				tabs.every((tab, index) => {
				// 判断是否含有类名 active
					if (!tab.classList.contains('active')) {
					// 距离左边的距离 加上每个tab的宽度 clientWidth 有包括padding
						offset += tab.clientWidth;
						return true
					} else {
					// 如果是激活项 线条宽度就等于 当前项的宽度
						tabSize = tab.clientWidth;
						const tabStyles = window.getComputedStyle(tab);
						if (tabs.length > 1) {
							// paddingLeft 是因为 用padding 隔开每个item 
							// 当前项的整体宽度 减去左右padding的宽度 达到只有文字的宽度
							tabSize -= parseFloat(tabStyles.paddingLeft) + parseFloat(tabStyles.paddingRight);
						}
						// paddingLeft 同理 是用padding 隔开的
						// 距离左边的距离 加上 当前项 距离左边的距离 达到刚好在文字底下的距离
						offset += parseFloat(tabStyles.paddingLeft);
						return false
					}
				});
				const transform = `translateX(${offset}px)`;
				style.width = tabSize + 'px';
				style.transform = transform;
				style.msTransform = transform;
				style.webkitTransform = transform;
                // 设置 底下条的宽度  距离左边的距离 
				let line = document.querySelector('.line')
				line.style.width = style.width;
				line.style.transform = style.transform
				line.style.msTransform = style.msTransform
				line.style.webkitTransform = style.webkitTransform
			}
		</script>
	</body>
</html>