简单的TabView(JS+CSS)
先看一下效果：http://www.XiTeJia.com/
我是按自己的页面需要做的。修改函数可以变得更灵活。相信根据这个思路，对新手制作TabView有帮助。
JS部分：var Folder1 = new Array('Tab1','Page1'); //Tab1是Tab的ID,Page1是Tab1显示的页面的IDvar Folder2 = new Array('Tab2','Page2');var Folder3 = new Array('Tab3','Page3');var Folder4 = new Array('Tab4','Page4');var TabCount = 4; //Tab的个数。这里为了简单直接给了个数值。如果要灵活点，可以用循环遍历。
function TabViewInit(){ var count = 1; while(eval('window.Folder'+count)){ AddEvent(eval('Folder'+count)[0]); count++; }}
function AddEvent(obj){ var oBtn = document.all[obj]; oBtn.attachEvent('onclick', Tab_OnClick);}
function Tab_OnClick(){ var obj = event.srcElement; if(obj.className == 'TabInActive'){ obj.className = 'TabActive'; var i = 1; while(i<=TabCount){ var f = eval('Folder'+i); if(obj.id == f[0]){ eval(f[1]).style.display = 'block'; }else{ eval(f[0]).className = 'TabInActive'; eval(f[1]).style.display = 'none'; } i++; } }}
CSS部分：#TabView{ background-color:#FFF; margin:.5em .5em 4em .5em;}
#TabTitle{
}#TabTitle ul li{ float: left; margin-right:0.5em; padding:7px;}#TabTitle ul li:hover{ color:#7D4800; background-color:#FFF;}
#TabPage{ border:solid 1px #CCC; margin-bottom:-1px; padding:10px;}
.TabActive{ cursor:default; border:1px solid #CCC; border-top:0; color:#7D4800; background-color:#FFF;}
.TabInActive{ cursor:pointer; border:1px solid #CCC; color:#666666; background-color:#EFEFEF;}
HTML部分：<div id="TabView"> <div id="TabPage"> <div id="Page1" style="display:block;"> <table width="100%" border="0"> <tr> <td width="50%"><img src="img/Product/battery.jpg" alt="电动车充电器" width="180" height="103" /></td> <td><h4>电动车充电器</h4> <p><strong>喜特佳</strong>生产的充电器主要适应于轻便电动车的电池。有多种规格、多种颜色、多种插口可选择。</p> <p align="right">规格可根据客户定制。</p><br /><br /> <a class="more" href="battery.html">更多型号</a></td> </tr> </table> </div> <div id="Page2" style="display:none;"> </div> <div id="Page3" style="display:none;"> </div> <div id="Page4" style="display:none;"> </div> <div id="TabTitle"> <ul> <li id="Tab1" class="TabActive">电动车充电器</li> <li id="Tab2" class="TabInActive">环形变压器</li> <li id="Tab3" class="TabInActive">EI变压器</li> <li id="Tab4" class="TabInActive">电源适配器</li> </ul> </div></div>
