<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切换</title> <link rel="stylesheet" href="css/reset.css"> <style> body{ text-align: center;}ul{ width: 456px; margin: 0 auto;}ul li{ float: left; width: 150px; height: 60px; line-height: 50px; border: 1px solid #eee;}.on{ background-color: #eee; color: #fff;}.tab1,.tab2,.tab3{ width: 500px; height: 500px; margin: 0 auto;}.tab1{ background-color: green;}.tab2{ background-color: gray; display: none;}.tab3{ background-color: red; display: none;} </style></head><body> <ul class="clearfix"> <li>111</li> <li>222</li> <li>333</li> </ul> <div class="tab1">第一张</div> <div class="tab2">第二张</div> <div class="tab3">第三张</div></body> <script> var oLi=document.getElementsByTagName('li'); var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].οnclick=function(){ for(var i=0; i<oLi.length;i++){ oLi[i].className=''; oDiv[i].style.display='none'; } this.className='on'; oDiv[this.index].style.display='block'; } }</script></html>
转载于:https://www.cnblogs.com/chabai/p/5200261.html
