|
<--css部分--> *{ |
|
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| #box{ | |
| width: 500px; | |
| height: 560px; | |
| border: 1px solid red; | |
| margin: 100px auto ; | |
| } | |
| .top>ul{ | |
| display: flex; | |
| } | |
| li{ | |
| width: 100px; | |
| height: 60px; | |
| background-color: wheat; | |
| text-align: center; | |
| line-height: 60px; | |
| } | |
| .atif{ | |
| background-color: teal; | |
| color: #fff; | |
| } | |
| .bottom>div{ | |
| width: 500px; | |
| height: 500px; | |
| background-color: yellow; | |
| text-align: center; | |
| line-height: 500px; | |
| font-size: 20px; | |
| color: red; | |
| display: none; | |
| } | |
| .bottom >.atife{ | |
| display: block; | |
| color: blue; | |
| } |
|
//html部分 <div id="box"> |
|
| <div class="top"> | |
| <ul> | |
| <li class="atif">首页</li> | |
| <li>详情页</li> | |
| <li>页面一</li> | |
| <li>页面二</li> | |
| <li>页面三</li> | |
| </ul> | |
| </div> | |
| <div class="bottom"> | |
| <div class="atife">首页</div> | |
| <div>详情页</div> | |
| <div>页面一</div> | |
| <div>页面二</div> | |
| <div>页面三</div> | |
| </div> | |
| </div> |
|
//js var oLi=document.getElementsByTagName(‘li‘); |
|
| var oBottom=document.getElementsByClassName(‘bottom‘)[0]; | |
| var oBottom_div=oBottom.getElementsByTagName(‘div‘); | |
| for(var i=0;i<oLi.length;i++){ | |
| oLi[i].index=i; | |
| oLi[i].onclick=function(){ | |
| for(var j=0;j<oBottom_div.length;j++){ | |
| oBottom_div[j].className=‘‘; | |
| oLi[j].className=‘‘; | |
| } | |
| this.className=‘atif‘; | |
| oBottom_div[this.index].className=‘atife‘; | |
| } | |
| } |