需要再加上JS進入控制。具體代碼如下,JS的功能就是用來修改CSS中的display屬性。下面的代碼只是做一些簡單的原理示範,你可以跟據你自己的需要進行修改。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> .tabnav ul{margin:0;padding:0;list-style:none;} .tabnav li{padding:5 10px;border:1px solid red;float:left;} .tabid {border:1px solid #000;clear:both;} </style> <script language='javascript'> function tab(n){ var tabnav="tab"+n; var tabid="tabid"+n; cleardisplay(); document.getElementById(tabid).style.display="block"; } function cleardisplay(){ for (i=1;i<3;i++) { var cleartabid="tabid"+i; document.getElementById(cleartabid).style.display="none"; } } </script> </HEAD> <BODY> <div> <div class='tabnav'> <ul> <li id='tab1' onclick='tab(1)'>TAB1</li> <li id='tab2' onclick='tab(2)'>TAB2</li> </ul> </div> <div id='tabid1' class='tabid'>tab1</div> <div id='tabid2' class='tabid' style='display:none;'>tab2</div> </div> </BODY></HTML>