js 实现选项卡里套选项卡

效果图大致如下：

写的可能不太好哦！大家一起加油！

代码如下：

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
	padding: 0;
	margin: 0;
	list-style: none;
	}
	#box{
	width: 960px;
	background: #e6e6e6;
	overflow: hidden;
	}
	#nav{
	width: 150px;
	float: left;
	}
	#nav li{
	width: 143px;
	height: 82px;
	border: 1px #eee solid;
	text-align: center;
	line-height: 82px;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
	}
	#nav li.selected{
	background: pink;
	opacity: 0.8;
	}
	#content{
	width: 810px;
	height: 335px;
	float: right;
	position: relative;
	}
	#content img{
	width: 810px;
	height: 335px;
	display: none;
	}
	#content ul{
	position:absolute;
	bottom: 0;
	width: 100%;
	text-align: justify;
	background: #fff;
	opacity: 0.6;
	display: none;
	}
	#content li{
	line-height: 30px;
	text-align: center;
	border: 1px #eee solid;
	padding: 0 20px;
	cursor: pointer;
	display: table-cell;
	}
	#content ul.show{
	display: table;
	}
	#content li.active{
	background: yellow;
	opacity: 0.8;
	}
	</style>
	</head>
	<body>
	<div id="box">
	<ul id="nav">
	<li class="selected">最热团购</li>
	<li>商城特惠</li>
	<li>名品推荐</li>
	<li>缤纷活动</li>
	</ul>
	<div id="content">
	<img src="img/img/pic1.jpg" style="display: block;">
	<ul class="show">
	<li class="active">最热团购1</li>
	<li>最热团购2</li>
	<li>最热团购3</li>
	</ul>
	<img src="img/img/pic1.jpg" >
	<ul>
	<li class="active">商城特惠1</li>
	<li>商城特惠2</li>
	<li>商城特惠3</li>
	</ul>
	<img src="img/img/pic1.jpg" >
	<ul>
	<li class="active">名品推荐1</li>
	<li>名品推荐2</li>
	<li>名品推荐3</li>
	</ul>
	<img src="img/img/pic1.jpg" >
	<ul>
	<li class="active">缤纷活动1</li>
	<li>缤纷活动2</li>
	<li>缤纷活动3</li>
	</ul>
	</div>
	</div>

	<script type="text/javascript">
	var arrImg=[
	['img/img/pic1.jpg','img/img/pic2.jpg','img/img/pic3.jpg'],
	['img/img/pic1.jpg','img/img/pic2.jpg','img/img/pic3.jpg','img/img/pic4.jpg'],
	['img/img/pic1.jpg','img/img/pic2.jpg','img/img/pic3.jpg','img/img/pic4.jpg','img/img/pic5.jpg'],
	['img/img/pic1.jpg','img/img/pic2.jpg','img/img/pic3.jpg','img/img/pic4.jpg']
	];
	oNav=document.getElementById('nav');
	aLi=oNav.getElementsByTagName('li');
	oContent=document.getElementById("content");
	aUl=oContent.getElementsByTagName('ul');
	aImg=oContent.getElementsByTagName('img');
	num=0;
	oLi=aUl[0].getElementsByTagName('li');
	fn2(aUl[0]);
	for(var i=0;i<aLi.length;i++){
	aLi[i].index=i;
	aLi[i].onclick=function(){
	for(var i=0;i<aLi.length;i++){
	num=this.index;
	aLi[i].className='';
	aUl[i].className='';
	aImg[i].style.display='none';
	}
	this.className="selected";
	aUl[num].className='show';
	aImg[num].style.display='block';
	fn2(aUl[num]);
	}
	}
	function fn2(smallUl){
	lis=smallUl.getElementsByTagName('li');
	for(var i=0;i<lis.length;i++){
	if(lis[i].className){
	aImg[num].src=arrImg[num][i];
	}
	lis[i].index=i;
	lis[i].onclick=function(){
	for(var i=0;i<lis.length;i++){
	lis[i].className='';
	}
	this.className='active';
	aImg[num].src=arrImg[num][this.index];
	}
	}
	}
	</script>>
	</body>
	</html>

js 实现选项卡里套选项卡

猜你喜欢