用javascript实现在Tab标签之间切换，通过点击Tab标签，显示出对应的内容。
<!----function:用javascript实现几个Tab标签间的切换。-- created by:少数派力量_Mole--date:7/08/15--><!DOCTYPE html><html><head><meta http-equiv = "content-type" content = "text/html" charset="UTF-8"><style type = "text/css">ul {overflow:hidden; zoom:1; list-style-type:none; cursor:pointer;}<!--ul样式-->p {font-size:30px; color:red; text-align:center;}ul,li {padding:0px; margin:0px;}ul li {float:right; width:100px; height:35px; line-height:35px;border:1px #bbb solid; text-align:center; border-bottom:none; background:#ccc;}ul li.fli {background:#fff; color:blue;}#tab_con {width:600px; height:600px;}#tab_con div {width:1024px; height:600px; background:#ccc; border:1px,#bbb; border-top:none;}#tab_con div.fdiv {background:#fff;}</style><script type="text/javascript">window.οnlοad=function() //onload 事件句柄，文档装载结束时调用{ var tabs=document.getElementById("tab").getElementsByTagName("li");var divs=document.getElementById("tab_con").getElementsByTagName("div");divs[0].style.display = "block"; //加载时显示第一个标签的内容 for(var i=0;i<tabs.length;i++){tabs[i].οnclick=function(){//鼠标点击触发for(var i=0;i<tabs.length;i++){if(tabs[i]==this){tabs[i].className="fli";//加载Tab样式divs[i].className="fdiv";//加载相应区域的样式divs[i].style.display = "block"; //使得对应点击标签的显示区域可见}else{tabs[i].className="";divs[i].className="";divs[i].style.display = "none"; //使得其他区域不可见}}}}}</script><title>十六进制颜色值</title></head><body><ul id="tab"><li class="fli">first</li><li>second</li><li>third</li></ul><div id="tab_con" align="center" ><div class="fdiv" align="center">first area</div><div>second area</div><div>third area</div></div></body></html>
代码测试截图：
