簡單實用js選項卡（原生態）

CSS樣式：

<style type="text/css">#tab li.option{ float:left; list-style:none; height:1.8em; line-height:1.8em; font-size:14px; font-weight:bold; text-align:center; width:5em; margin:0 5px; background:#999;}#tab div.content{ width:500px; height:350px; background:#ffcc99; clear:both; display:none;}#tab li.seletedLi{ background:#ffcc99;}#tab div.seletedDiv{ display:block;}</style>

Html代碼：

<div id='tab'><ul> <li class="option seletedLi">第一部分</li> <li class="option">第二部分</li> <li class="option">第三部分</li> <li class="option">第四部分</li> <li class="option">第五部分</li></ul><div class="content seletedDiv">第一部分</div><div class="content">第二部分</div><div class="content">第三部分</div><div class="content">第四部分</div><div class="content">第五部分</div></div>

js代碼：

<script> var oTab = document.querySelector('div'); var oLis = oTab.querySelectorAll('li'); var oDiv = oTab.querySelectorAll('div'); var oLisLength = oLis.length;function changeTab(Index){for(var i=0;i<oLisLength;i++){oLis.item(i).className = 'option';oDiv.item(i).className = 'content';}oLis.item(Index).className = 'option seletedLi';oDiv.item(Index).className = 'content seletedDiv';}for(var i=0;i<oLisLength;i++){oLis.item(i).lis=i;oLis.item(i).onclick=function fn(){changeTab(this.lis)};}</script>

示範地址：http://www.cpan.cc/upload/1014-1.html