底部导航点击切换图片

最新推荐文章于 2022-07-21 15:09:32 发布

倚楼听风雨的行者

最新推荐文章于 2022-07-21 15:09:32 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_42972187/article/details/95043584

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul li{
				margin:0;
				padding:0;
			}			
			li {
				list-style: none;
			}		
			.footer {
				width: 800px;
				height: 50px;
				margin: 30px auto;
			}	
			ul li {
				width:40px;
				height: 50px;
				float: left;
				margin-right: 10px;
			}
			
			img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				border: none;
				display: block;
			}	
			span {
				font-size: 12px;
				display: block;
				width:30px;
				height:20px;
				color:blue;
			}	
			ul li>img:nth-of-type(2) {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class='footer'>
			<ul id="list">
				<li>
					<img  src="images/con3-4.jpg" alt="" />
					<img  src="images/con3-5.jpg" alt="" />
					<span>首页</span>
				</li>
				<li>
					<img  src="images/con3-5.jpg" alt="" />
					<img src="images/con3-6.jpg" alt="" />
					<span>首页</span>
				</li>
				<li>
					<img  src="images/con3-4.jpg" alt="" />
					<img  src="images/con3-5.jpg" alt="" />
					<span>首页</span>
				</li>
				<li>
					<img  src="images/con3-4.jpg" alt="" />
					<img src="images/con3-5.jpg" alt="" />
					<span>首页</span>
				</li>
			</ul>
		</div>
		<script>
			var list = document.getElementsByTagName('li');
//			console.log(list)
			var flag = true;
			for(var i = 0; i < list.length; i++) {
				list[i].onclick = function() {	
			        var img = this.getElementsByTagName('img');
			        var span =this.getElementsByTagName('span');
					if(img[0].style.display === "block"){
						img[0].style.display = "none";
						img[1].style.display = "block";
						span[0].style.color="red";
					}else{
						img[1].style.display = "block";
						img[0].style.display = "none";
				       	span[0].style.color="blue";
					}
					 if(flag) {
					 	img[0].style.display = "none";
					 	img[1].style.display = "block";
					 	span[0].style.color="red";
					 	flag = false;
					 } else {
					 	img[0].style.display = "block";
					 	img[1].style.display = "none";
				        	span[0].style.color="blue";
					 	flag = true;
					 }
				}
			}
		</script>
	</body>

</html>