簡單實用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).οnclick=function fn(){changeTab(this.lis)};
	}

</script>

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