js 实现选项卡里套选项卡

来源：互联网发布：茶叶网络营销策划方案编辑：程序博客网时间：2024/06/02 22:45

效果图大致如下：

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

代码如下：

<!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>

阅读全文

0 0