HTML选项卡效果完整代码（JavaScript）_html选项卡代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46170671/article/details/107635759

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			.title{
				display: flex;
			}
			.container{
				width: 500px;
				border: 1px solid red;
				margin: 100px auto;
			}
			.title{
				display: flex;
			}
			.title li{
				flex: 1;
				padding: 10px 0;
				text-align: center;
			}
			.title li.active{
				background-color: #0000FF;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="title">
				<li class="active">火车票</li>
				<li>汽车票</li>
				<li>飞机瓢</li>
			</ul>
			<ul class="content" style="padding: 10px;">
				<li>火车票111111111111111</li>
				<li style="display: none;">汽车票11111111111111111</li>
				<li style="display: none;">飞机瓢111111111111111</li>
			</ul>
		</div>
		<script>
			let title = document.getElementsByClassName('title')[0]
			let content = document.getElementsByClassName('content')[0]
			let titlelist = title.children
			let contentlist = content.children
			for(let i = 0; i < titlelist.length; i++){
				let item = titlelist[i];
				item.onclick = () => {
					let active = title.getElementsByClassName('active')[0]
					active.classList.remove('active')
					item.classList.add("active")
					
					
					for(let j = 0; j < titlelist.length; j++){
					contentlist[j].style.display = "none"
					}
					contentlist[i].style.display = "block"
				}
			}
		</script>
	</body>
</html>