留着,
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="assets/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <title>DIV层切换</title> </head> <body> <span οnclick="ChangeDiv('0','JKDiv_',2)" style="cursor:pointer; display: inline-block; width:100px;height:50px;border:1px solid purple;">内容一</span> <span οnclick="ChangeDiv('1','JKDiv_',2)" style="cursor:pointer; display: inline-block; width:100px;height:50px;border:1px solid purple;">内容二</span> <span οnclick="ChangeDiv('2','JKDiv_',2)" style="cursor:pointer; display: inline-block; width:100px;height:50px;border:1px solid purple;">内容三</span> <div id="JKDiv_0" style="font-size:14px;margin:10px;color:#FF0000;">内容部分第一区</div> <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区</div> <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div> </body> <script src="assets/global/plugins/jquery.min.js" ></script> <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" ></script> <script language="JavaScript" type="text/javascript"> function ChangeDiv(divId,divName,zDivCount) { for(i=0;i<=zDivCount;i++) { document.getElementById(divName+i).style.display="none"; $("span").removeClass("border"); //将所有的层都隐藏 } document.getElementById(divName+divId).style.display="block"; //显示当前层 } </script> </body> </html>