JS实战003:选项卡切换图片

有了前面制作滑动轮播图的经验，再来做个选项卡切换的非常容易了，跟我们在轮播图下面新增点选功能基本是一样的，当我把鼠标放到那个选项上就切换到哪张图，同时选项卡的背景色跟随鼠标移动而变化，下面是效果图。

同样的我们第一步先写出HTML基本代码，这里我们有四个选项和四张图，鼠标放到哪个选项上下面就显示对应的图出来，默认给第一个选项选中效果和第一张图显示效果，所以分别加了active和show属性。

<div id="tab">
	<ul class="list">
		<li class="nav active">图片一</li>
		<li class="nav">图片二</li>
		<li class="nav">图片三</li>
		<li class="nav">图片四</li>
	</ul>
	<ul class="content">
		<li class="picture">
			<img class="show" src="../src/assets/images/1.png" alt="">
		</li>
		<li class="picture">
			<img src="../src/assets/images/2.png" alt="">
		</li>
		<li class="picture">
			<img src="../src/assets/images/3.png" alt="">
		</li>
		<li class="picture">
			<img src="../src/assets/images/4.png" alt="">
		</li>
	</ul>
</div>

第二步，布局显示，最外面的div是用来定义图片显示区域的，而ul而分别指向了选项列表和图片列表，为了让图片显示在同一位置，这里我们还是用到了绝对定位，并默认隐藏了其他几张。

<style type="text/css">
		*{
			margin:0px;
			padding:0px;
			box-sizing: border-box;
		}
		li{
			list-style: none;
		}
		#tab{
			position: relative;
			width: 600px;
			height: 400px;
			margin:50px auto;
			border: 10px solid rgba(10, 10, 10,0.5);
		}
		.nav{
			float: left;
			width: 25%;
			height: 50px;
			background-color: #eee;
			text-align: center;
			line-height: 50px;
		}
		.active{
			background-color: rgba(15,151,241,0.6);
		}
		.content{
			position: absolute;
			width:580px;
			top:50px;
			height: 330px;
		}
		.content .picture img{
			position: absolute;
			display: none;
			width: 580px;
			height: 330px;
		}
		.content .picture .show{
			display: block;
		}

这里需要注意的是我设置了box-sizing: border-box;属性，所以在计算容器宽高时要把边距所以我们也计算在内，不然会出错，这种方式比较适合百分比的时候用，这时页面载入的时候看到如下的效果：

第三步就是交互效果了，用JavaScript获取我们需要进行交互的元素，然后遍历我们的nav列表，当我们将鼠标放置到对应的选项时将其他几个选项的active样式去除，而picture则将其他几个的show样式去除，只留本身的样式。

<script>
	var navs=document.getElementsByClassName("nav");
	var	pics=document.getElementsByClassName("picture");
	index=0; 
	for(var i=0;i<navs.length;i++){
		(function(i){
			navs[i].onmouseover=function(){
				navs[index].classList.remove("active");
				pics[index].children[0].classList.remove("show");
				index=i;
				navs[index].classList.add("active");
				pics[index].children[0].classList.add("show");
			}
		})(i);
	}
</script>

这样我们就得到了上图的效果了，这个思路不止可以用在图片切换上，content中可以放入任何你想要显示的内容，下面是完整代码，有兴趣的可以试试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选项卡</title>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;
			box-sizing: border-box;
		}
		li{
			list-style: none;
		}
		#tab{
			position: relative;
			width: 600px;
			height: 400px;
			margin:50px auto;
			border: 10px solid rgba(10, 10, 10,0.5);
		}
		.nav{
			float: left;
			width: 25%;
			height: 50px;
			background-color: #eee;
			text-align: center;
			line-height: 50px;
		}
		.active{
			background-color: rgba(15,151,241,0.6);
		}
		.content{
			position: absolute;
			width:580px;
			top:50px;
			height: 330px;
		}
		.content .picture img{
			position: absolute;
			display: none;
			width: 580px;
			height: 330px;
		}
		.content .picture .show{
			display: block;
		}
	</style>
</head>
<body>	
	<div id="tab">
		<ul class="list">
			<li class="nav active">图片一</li>
			<li class="nav">图片二</li>
			<li class="nav">图片三</li>
			<li class="nav">图片四</li>
		</ul>
		<ul class="content">
			<li class="picture">
				<img class="show" src="../src/assets/images/1.png" alt="">
			</li>
			<li class="picture">
				<img src="../src/assets/images/2.png" alt="">
			</li>
			<li class="picture">
				<img src="../src/assets/images/3.png" alt="">
			</li>
			<li class="picture">
				<img src="../src/assets/images/4.png" alt="">
			</li>
		</ul>
	</div>
</body>
<script>
	var navs=document.getElementsByClassName("nav");
	var	pics=document.getElementsByClassName("picture");
	index=0; 
	for(var i=0;i<navs.length;i++){
		(function(i){
			navs[i].onmouseover=function(){
				navs[index].classList.remove("active");
				pics[index].children[0].classList.remove("show");
				index=i;
				navs[index].classList.add("active");
				pics[index].children[0].classList.add("show");
			}
		})(i);
	}
</script>
</html>

JS实战003:选项卡切换图片

猜你喜欢