利用js切换选项与其内容

使用js切换选项的样式与其内容

先看效果，第一张图为默认状态，第二张图为点击选项二的时候的状态。

在这里html和css的代码只给出不介绍，着重介绍javascript部分的代码。

html的代码如下：

<banner>
			<div class="banner_left">
				<div class="banner_left_title">
					盗梦空间
				</div>
				<ul class="menu">
					<li><a class="active" href="javascript:;">梦中空间1</a>
					</li>
					<li><a href="javascript:;">梦中空间2</a>
					</li>
					<li><a href="javascript:;">梦中空间3</a></li>
					<li><a href="javascript:;">梦中空间4</a></li>
					<li><a href="javascript:;">梦中空间5</a></li>
					<li><a href="javascript:;">梦中空间6</a></li>
				</ul>
			</div>
			<div class="banner_right">
				<img id="img" src="../img/01.jpg">
			</div>
		</banner>

css的代码如下

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			banner{
				width: 1000px;
				height: 500px;
				background-color: #aaffff;
				margin: 30px auto;
				display: block;
				border: 1px solid #BD4E85;
			}
			banner .banner_left{
				float: left;
				width: 300px;
				height: 500px;
				background-color: red;
			}
			banner .banner_left .banner_left_title{
				width: 100%;
				height: 100px;
				background-color: #963E6A;
				text-align: center;
				font-size: 30px;
				color: #FFFFFF;
				line-height: 100px;
				font-family: "宋体";
				font-weight: bolder;
				text-shadow: 2px 2px 5px #000000;
			}
			banner .banner_left .menu li{
				list-style: none;
				height: 66.7px;
				width: 100%;
				background-color: #1a3280;
				text-align: center;
				line-height: 66.7px;
			}
			banner .banner_left .menu a{
				text-decoration: none;
				color: #FFFFFF;
				font-size: 20px;
				display: block;
				width: 100%;
				height: 100%;
			}
			banner .banner_left .menu a:hover{
				background-color: #BD4E85;
			}
			.active{
				background-color: #BD4E85;
			}
			banner .banner_right{
				float: right;
				width: 700px;
				height: 500px;
				
			}
			banner .banner_right img{
				width: 100%;
				height: 100%;
			}
		</style>

javascript代码如下：

<script type="text/javascript">
			window.onload = function(){
				let Alla = document.querySelectorAll("a");
				let imgArr = ["../img/01.jpg","../img/02.jpg","../img/03.jpg","../img/04.jpg","../img/05.jpg","../img/01.jpg"];
				let img = document.querySelector("#img");
				// for(let i=0;i<Alla.length;i++)
				// {
				// 	Alla[i].onclick = function(){			
				// 			for(let i=0;i<Alla.length;i++)
				// 			{
				// 				Alla[i].className = '';
				// 			}
				// 			this.classList.toggle("active");
				// 	};		
				// };
					var last = 0;
					//初始化为0，与设置的默认样式下标相对应
				 for(var i=0; i<Alla.length; i++){
				            //给每个li添加索引和点击事件
				            Alla[i].index=i;
				            Alla[i].onclick=function(){
				                //应用classList.toggle()方法,修改class
				                Alla[last].classList.toggle('active');//删除上一个点击后的样式
												
				                this.classList.toggle('active');//为点击的元素添加样式
				                last=this.index;//记录点击元素的下标
												img.src = imgArr[last];
				            }
				        }
				
			};
		</script>

切换选项难点在于，点击其他按钮的时候，清除上一个按钮保留的样式，这里采用两种方法。

第一种方法是设置两层循环，第一次遍历所有的选项，并绑定单击响应函数，第二次循环将所有的选项的class清空，这样每次点击其他的选项的时候，都先会对所有选项的class进行清空，然后在设置触发后的样式。

第二种方法是增加一个计数器，记录每次点击的下标，然后在点击下一次的选项的时候，将上一次的样式去除掉。

拓展知识：
==classList.toggle(“active”)==可用添加和删除类名，有就删除，没有就添加。

本文地址：https://blog.csdn.net/weixin_45777923/article/details/112572895