原生点击切换图片的导航栏

原生导航栏底部实现图片切换

图片需要自己准备

代码

html:
<div id="tab">
	<ul class="list">
		<li class="list_nav active">
			<img class="img1 on" src="img/index/开店-icon@2x.png"/>
			<img class="img2" src="img/index/搜索@2x.png"/>
		</li>
		<li class="list_nav">
			<img class="img1"  src="img/index/我的-icon@2x.png"/>
			<img class="img2 on" src="img/index/搜索@2x.png"/>
		</li>
		
	</ul>
	<ul class="tab">
		<li class="tab_nav on">1</li>
		<li class="tab_nav">2</li>
		
	</ul>
</div>
css
	li{list-style: none;}
	
	#tab{
		position: relative;
		width: 600px;
		height: 400px;
		margin:50px auto;
		border: 1px solid #ccc;
	}
	.list_nav{
		float: left;
		width: 199px;
		height: 50px;
		border-right: 1px solid red;
		background-color: #eee;
		text-align: center;
		line-height: 50px;
	}
	.active{
		background-color: red;
	}
	.tab_nav{
		display: none;
		position: absolute;
		top:50px;
		width: 100%;
		height: 350px;
	}
	.img1,.img2{display: none;}
	.on{
		display: block;
	}
js:
<script>
	
	var aList=document.getElementsByClassName("list_nav"),
		aTab=document.getElementsByClassName("tab_nav"),
		img1=document.getElementsByClassName("img1"),
		img2=document.getElementsByClassName("img2"),
		index=0; //用来存储上一次的值
	for(var i=0;i<aList.length;i++){
		//闭包加函数自执行
		(function(i){
			aList[i].onclick=function(){
				aList[index].classList.remove("active");
				aTab[index].classList.remove("on");
				img1[index].classList.remove("on");
				img2[index].classList.add("on");
				
				index=i;
				aList[index].classList.add("active");
				aTab[index].classList.add("on");
				img1[index].classList.add("on");
				img2[index].classList.remove("on");
			}
		})(i);
	}
	
</script>