Simple and practical JS tab (Original Ecology)

CSS style:

<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 code:

<Div id = 'tab'> <ul> <li class = "option seletedli"> Part 1 </LI> <li class = "option"> Part 2 </LI> <li class = "option"> Part 3 </LI> <li class = "option"> Part 4 </LI> <li class = "option"> Part 5 </LI>/ LI> </ul> <Div class = "content seleteddiv"> Part 1 </div> <Div class = "content"> Part 2 </div> <Div class =" content "> Part 3 </div> <Div class =" content "> Part 4 </div> <Div class =" content "> Part 5 </div>>

JS Code:

<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>

Demo address: http://www.cpan.cc/upload/1014-1.html