JavaScript选项卡

最新推荐文章于 2024-09-11 22:31:16 发布

派大鑫的工作室

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量133

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/Cc040909/article/details/140085078

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
	</head>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.option {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.option_one {
			background-color: red;
		}

		.option_two {
			background-color: aqua;
		}

		.option_three {
			background-color: aqua;
		}


		.content {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.content_one {
			width: 300px;
			height: 300px;
			background-color: saddlebrown;
		}

		.content_two {
			width: 300px;
			height: 300px;
			display: none;
			background-color: darkgoldenrod;
		}

		.content_three {
			width: 300px;
			height: 300px;
			display: none;
			background-color: sandybrown;
		}
	</style>

	<body>

		<div class="option">
			<p class="option_one">选项卡1</p>
			<p class="option_two">选项卡2</p>
			<p class="option_three">选项卡3</p>
		</div>


		<div class="content">
			<p class="content_one">艾瑞巴</p>
			<p class="content_two">嗨起来</p>
			<p class="content_three">芜湖</p>
		</div>


		<script>
			let i = document.getElementsByClassName('option_one')[0];
			let s = document.getElementsByClassName('option_two')[0];
			let k = document.getElementsByClassName('option_three')[0];

			let o = document.getElementsByClassName('content_one')[0];
			let m = document.getElementsByClassName('content_two')[0];
			let n = document.getElementsByClassName('content_three')[0];

			i.onclick = function() {
				i.style.backgroundColor = 'red';
				s.style.backgroundColor = 'aqua';
				k.style.backgroundColor = 'aqua';
				o.style.display = 'block';
				m.style.display = 'none';
				n.style.display = 'none';
			}

			s.onclick = function() {
				i.style.backgroundColor = 'aqua';
				s.style.backgroundColor = 'red';
				k.style.backgroundColor = 'aqua';
				o.style.display = 'none';
				m.style.display = 'block';
				n.style.display = 'none';
			}

			k.onclick = function() {
				i.style.backgroundColor = 'aqua';
				s.style.backgroundColor = 'aqua';
				k.style.backgroundColor = 'red';
				o.style.display = 'none';
				m.style.display = 'none';
				n.style.display = 'block';
			}
		</script>
	</body>
</html>