HTML选项卡效果完整代码（JavaScript）

最新推荐文章于 2024-03-19 00:00:51 发布

nonodog

最新推荐文章于 2024-03-19 00:00:51 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript 文章标签： html js javascript

本文链接：https://blog.csdn.net/weixin_46170671/article/details/107635759

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

nonodog

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
HTML选项卡效果完整代码（JavaScript）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style-type: none; } .title{ display: flex; } .container{ width:
复制链接

扫一扫