用原生JavaScript实现的一个选项卡套选项卡切换

先来看一下效果图

接下来就是代码结构：

HTML结构：

<div class="box" id="box">
			<ul id='ul1'>
				<li class="activeNav">最新团购</li>
				<li>商品特惠</li>
				<li>名品推荐</li>
				<li>缤纷活动</li>
			</ul>
			<div>
				<img src="../img/1.jpg"/>
				<img src="../img/2.jpg">
				<img src="../img/3.jpg">
				<ul>
					<li class="activeImg">商品1</li>
					<li>商品2</li>
					<li>商品3</li>
				</ul>
			</div>
			<div>
				<img src="../img/4.jpg">
				<img src="../img/5.jpg">
				<img src="../img/6.jpg">
				<img src="../img/7.jpg">
				<ul>
					<li>商品1</li>
					<li>商品2</li>
					<li>商品3</li>
					<li>商品4</li>
				</ul>
			</div>
			<div>
				<img src="../img/8.jpg">
				<img src="../img/9.jpg">
				<img src="../img/10.jpg">
				<img src="../img/11.jpg">
				<ul>
					<li>商品1</li>
					<li>商品2</li>
					<li>商品3</li>
					<li>商品4</li>
				</ul>
			</div>
			<div>

				<img src="../img/1.jpg">
				<img src="../img/2.jpg">
				<img src="../img/3.jpg">
				

				<ul>
					<li>商品1</li>
					<li>商品2</li>
					<li>商品3</li>

				</ul>
			</div>
		</div>

CSS样式：

<style type="text/css">
				body,
				ul,
				li,
				div {
					padding: 0;
					margin: 0;
					list-style: none;
					font-family: cursive;
				}
				
				.box {
					width: 900px;
					margin: 0 auto;
					height: 308px;
					overflow: hidden;
				}
				
				#ul1 {
					width: 200px;
					float: left;
					height: 308px;
					
				}
				
				#ul1 li {
					height: 75px;
					line-height: 76px;
					text-align: center;
					font-size: 15px;
					border: 1px solid #eee;
					cursor: pointer;
				}
				
				#ul1 li.activeNav {
					background: #5bc0de;
					color: #fff;
				}
				
				.box div {
					width: 700px;
					float: right;
					position: relative;
					height: 308px;
					display: none;
				}
				
				.box div img {
					width: 100%;
					height: 308px;
				}
				
				.box div ul {
					width: 100%;
					height: 30px;
					position: absolute;
					left: 0px;
					bottom: 0px;
					
					
				}
				
				.box div li {
					float: left;
					margin-right: 1px;
					cursor: pointer;
					background: #eee;
					line-height: 30px;
					font-size: 12px;
					text-align: center;
					height: 40px;
				}
				
				.box div li.activeImg {
					background: #d9534f;
    				color: #fff;
				}
				
			</style>

JavaScript代码：

<script type="text/javascript">
			//获取所有元素
			var oUlNav = document.getElementById("ul1");
			var oLiNav = oUlNav.getElementsByTagName("li");
			var oBox = document.getElementById("box");
			var oDiv = oBox.getElementsByTagName("div");
			//初始化
			oDiv[0].style.display = "block";
			for (var i = 0 ; i<oDiv.length;i++) {
				tab(oDiv[i])
			}
			//侧栏Nav切换
			for (var i = 0 ; i<oLiNav.length ; i++) {
				oLiNav[i].index = i ;
				oLiNav[i].onclick = function(){
					for (var i = 0 ; i<oLiNav.length ; i++) {
						oLiNav[i].className = "";
						oDiv[i].style.display = 'none';
					}
					this.className = "activeNav";
					oDiv[this.index].style.display = 'block';
				}
			}
			function tab(obj){
				var oImg = obj.getElementsByTagName("img");
				var oLi = obj.getElementsByTagName("li");
				
				//长度赋值
				for (var i = 0 ; i<oLi.length; i++) {
					oLi[i].style.width = (700/oLi.length)-(oLi.length*0.5)+"px"
				}
				//tab_img
				for (var i = 0 ; i<oLi.length;i++) {
					oLi[i].index = i ;
					oLi[i].onclick = function(){
						for (var i = 0 ; i<oLi.length ; i++) {
							oLi[i].className = ""
							oImg[i].style.display = "none"
						}
						this.className = "activeImg";
						oImg[this.index].style.display = "block"
					}
				}
			}
		</script>