标签：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: none; } </style> <script> function tab(pid){ var tabs=["tab1","tab2","tab3","tab4"]; for(var i=0;i<4;i++){ if(tabs[i]==pid){ document.getElementById(tabs[i]).style.display="block"; }else{ document.getElementById(tabs[i]).style.display="none"; } } } </script> </head> <body> <div id="tanContainer"> <div id="tabNav"> <ul> <li onclick="tab(‘tab1‘)">标题一</li> <li onclick="tab(‘tab2‘)">标题二</li> <li onclick="tab(‘tab3‘)">标题三</li> <li onclick="tab(‘tab4‘)">标题四</li> </ul> </div> <div id="tab"> <div id="tab1">内容一</div> <div id="tab2">内容二</div> <div id="tab3">内容三</div> <div id="tab4">内容四</div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } #tabCon_1{ display: none; } #tabCon_2{ display: none; } #tabCon_3{ display: none; } </style> <script> function changeTab(tabCon_num){ for(i=0;i<=3;i++) { document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 } document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 } </script> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li onclick="changeTab(‘0‘)">标题一</li> <li onclick="changeTab(‘1‘)">标题二</li> <li onclick="changeTab(‘2‘)">标题三</li> <li onclick="changeTab(‘3‘)">标题四</li> </ul> </div> <div id="tabCon"> <div id="tabCon_0">内容一</div> <div id="tabCon_1">内容二</div> <div id="tabCon_2">内容三</div> <div id="tabCon_3">内容四</div> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zcancandice/p/5738239.html
