原生js标签切换(学习篇)

最新推荐文章于 2024-07-18 15:48:23 发布

skyblue_afan

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量583

点赞数 3

分类专栏： web前端 JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/skyblue_afan/article/details/123276132

版权

web前端同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

1、html部分

<div id="box" class="box">
	<div id="tags">
		 <div class="current">标签一</div>
			  <div>标签二</div>
			  <div>标签三</div>
			  <div>标签四</div>
		</div>
		<div id="content">
			<div class="current">内容一</div>
			<div>内容二</div>
			<div>内容三</div>
			<div>内容四</div>
		</div>
</div>

2、css样式部分

<style type="text/css">
.box {
	width: 1000px;
	height: 500px;
	/* border: 2px solid pink; */
	margin: 100px auto;
}

.box #tags {
	display: flex;
	margin-top: 10px;
	margin-left: 15px;
}

.box #tags div {
	width: auto;
	border-bottom: 3px solid red;
	padding: 5px 10px;
	cursor: pointer;
}

.box #tags .current {
	background-color: skyblue;
	border-left: 3px solid red;
	border-top: 3px solid red;
	border-right: 3px solid red;
	border-bottom: none;
}

.box #content {
	margin-left: 15px;
	width: 800px;
	height: 300px;
	background-color: pink;
	border-top: none;
	border: 3px solid red;
	margin-top: -3px;
}

.box #content div {
	display: none;
	font-size: 24px;
	text-indent: 2em;
}

.box #content .current {
	display: block;
}
</style>

3、js部分

<script type="text/javascript">
	//获取元素
	var box = document.getElementById('box');
	// 获取tags元素儿子们集合
	var tags = box.children[0].children;
	// 获取内容content儿子们集合
	var content = box.children[1].children;
	for (var i = 0; i < tags.length; i++) {
		tags[i].index = i;
		tags[i].onclick = function() {
			// 干掉别人
			for (var j = 0; j < tags.length; j++) {
				tags[j].className = "";
				content[j].className = "";
			}
			//留下自己
			this.className = "current";
			content[this.index].className = "current";
		}
	}
</script>