<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>简单的选项卡</title> </head> <mce:script type="text/javascript"><!-- function dis(dd1,dd2,dd3){ document.getElementById(dd1).style.display = ""; document.getElementById(dd2).style.display = "none"; document.getElementById(dd3).style.display = "none"; } // --></mce:script> <body> <div style="width:523px; height:150px; margin:0 auto; border:1px solid yellow; margin-top:140px;"> <div style=" height:150px; width:150px; float:left; border:1px dashed red; "οnclick="dis('d1','d2','d3')">1</div> <div style=" height:150px; width:150px; float:left; border:1px dashed red;margin-left:20px;" οnclick="dis('d2','d1','d3')">2</div> <div style=" height:150px; width:150px; float:left; border:1px dashed red;margin-left:20px;" οnclick="dis('d3','d2','d1')">3</div> </div> <div id = "d1" style="border:1px solid yellow; height:100px; width:300px; display:none;"> 选项一 </div> <div id = "d2" style="border:1px solid red; height:100px; width:300px;"> 选项二 </div> <div id = "d3" style="border:1px solid; height:100px; width:300px; display:none;"> 选项三 </div> </body> </html>