纯js实现点击切换内容

一、详情解释

通过点击，切换对应的内容，运用js

二、具体代码

代码如下，代码中存在照片，可以自行进行改变代码即可

	<div>
			<div class="btns">
				<button>热销</button>
				<button>推荐</button>
				<button>经典</button>
			</div>
			<div class="contents">
				<div>热销第一名
					<div><img src="./img/pic1.png" alt=""></div>
					<div><img src="./img/pic2.png" alt=""></div>
					<div><img src="./img/pic3.png" alt=""></div>
				</div>
				<div>推荐五颗星

					<div><img src="./img/pic3.png" alt=""></div>
					<div><img src="./img/pic1.png" alt=""></div>y
					<div><img src="./img/pic2.png" alt=""></div>
				</div>
				<div>经典永流传
					<div><img src="./img/pic1.png" alt=""></div>
					<div><img src="./img/pic3.png" alt=""></div>
					<div><img src="./img/pic2.png" alt=""></div>
				</div>
			</div>
		</div>
		<script>
			//1、获取所有的button按钮
			var _btns = document.querySelectorAll(".btns button");
			var _contents = document.querySelectorAll(".contents>div");
			_btns.forEach(function(btn, index) {
				btn.onclick = function() {
					//对应的contents的下标显示
					_contents[index].style.display = "block";
					//对应的contens的其他下标隐藏
					_contents.forEach(function(item, i) {
						if (index != i) {
							_contents[i].style.display = "none";
						}
					})
				}
			})

		</script>

---

总结

纯运用js代码进行点击切换内容，但是写法并不唯一，具体运用了隐藏和点击显示。

新人一枚，有兴趣的朋友可以提出宝贵的指点意见，希望大家多多点赞评论哦！