JavaScript选项卡标题

憨批小白白

于 2022-08-19 13:45:53 发布

阅读量394

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/A1609926242/article/details/126423255

版权

今天我们拿js做一个选项卡标题啊案例

废话少说上图片
在这里插入图片描述

上代码！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			#div1 {
				width: 1000px;
				height: 300px;
			
				margin: 0 auto;
				margin-top: 60px;
				position: relative;
			}

			button {
				width: 250px;
				height: 50px;
				border:  #fff;
				position: absolute;
				bottom: 0;
				font-size: 20px;
				color: white;
				font-weight: 800;
			}

			#div1 div {
				width: 1000px;
				height: 250px;
				position: absolute;
				display: none;
			}
			span{
				display: block;
				width: 200px;
				margin: 0 auto;
				margin-top: 30px;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 80px;
			}
			p{
				display: block;
				width: 600px;
				margin: 0 auto;
				color: #FFFFFF;
				font-weight: 300;
				font-size: 20px;
				margin-left: 375px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<button type="button" >London</button>
			<div>
				<span>London</span>
				<p>London is the capital city of England.</p>
			</div>

			<button type="button" >Paris</button>
			<div>
				<span>Paris</span>
				<p>Paris is the capital of France.</p>
			</div>

			<button type="button" >Tokyo </button>
			<div>
				<span>Tokyo </span>
				<p>Tokyo is the capital of Japan.</p>
			</div>

			<button type="button">Oslo</button>
			<div style="display: block;">
				<span>Oslo</span>
				<p>Oslo is the capital of Norway.</p>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var div1 = document.getElementById("div1");
		var buttons = document.querySelectorAll("button");
		var divs = div1.querySelectorAll("div");
		// 首先把button一字排开
		(function buttonall() {
			for (let i = 1; i < buttons.length; i++) {
				buttons[0].style.left = 0;
				buttons[i].style.left = buttons[i - 1].offsetLeft + 250 + "px";
			}
		})();
		
		let array = ["#F44336", "#4CAF50", "#2196F3", "#FF5722"];
		
		
		// 给第3个按钮添加颜色
		(function arrays() {
		
			for (let i = 0; i < buttons.length; i++) {
				buttons[3].style.backgroundColor = array[i];
			}
		})();
		// 给div添加背景颜色
		(
			function divall(){
				for (let i = 0; i <divs.length; i++) {
					divs[i].style.backgroundColor = array[i];
				}
			}
		)();
		//最右搜贩卖快乐小憨憨
		// js代码
		(
			function jsall(){
				for(let i=0;i<buttons.length;i++){
					
					buttons[i].addEventListener("click",function(){
						// 隐藏div
						for(let j=0;j<divs.length;j++){
							divs[j].style.display="none";
							buttons[j].style.backgroundColor=""	
						}
					// 点击时他的下一个兄弟出现
					this.nextElementSibling.style.display="block";
					this.style.backgroundColor = array[i];		
					})
				}
			}
		)();
	</script>
</html>