css部分：

<style> *{ margin:0px; padding:0px; } ul{ list-style:none; } .tab{ width:800px; height:300px; margin:100pxauto; } .tab_list{ height:39px; border:1pxsolid#ccc; background-color:#fcfcfc; } .tab_listli{ float:left; height:39px; line-height:39px; padding:020px; text-align:center; cursor:pointer; } .tab_list.current{ background-color:#c81623; color:#fff; } .item{ display:none; } </style> html部分： <divclass="tab"> <divclass="tab_list"> <ul> <liclass="current">商品介紹</li> <li>規格與包裝</li> <li>售後保障</li> <li>商品評價</li> <li>手機社群</li> </ul> </div> <divclass="tab_con"> <divclass="item"style="display:block;"> 商品介紹模組內容 </div> <divclass="item"> 規格與包裝模組內容 </div> <divclass="item"> 售後保障模組內容 </div> <divclass="item"> 商品評價模組內容 </div> <divclass="item"> 手機社群模組內容 </div> </div> </div> js部分： <script> vartab_list=document.querySelector('tab_list'); varlis=document.querySelectorAll('li'); varitems=document.querySelectorAll('.item'); for(vari=0;i<lis.length;i++){ lis[i].setAttribute('index',i); lis[i].onclick=function(){ for(vari=0;i<lis.length;i++){ lis[i].className=''; } this.className='current'; varindex=this.getAttribute('index'); //console.log(index); for(vari=0;i<items.length;i++){ items[i].style.display='none'; } items[index].style.display='block'; } } </script>