来源:http://www.jb51.net/article/30108.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</title><script> function tab(){var list = document.getElementById("list").getElementsByTagName("li");var con = document.getElementById("con").getElementsByTagName("div"); for(var i = 0;i<list.length;i++){list[i].onclick=function(){ for(var i=0;i<list.length;i++){ if(list[i]==this){ list[i].className = "on";con[i].style.display = "block"; //alert(list[i].className); } else{ list[i].className=""; con[i].style.display="none";} } } } } window.onload=function(){tab();}</script> </head><body><div id="list"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="con"> <div style="display:block;">111111</div> <div style="display:block;">222222</div> <div style="display:block;">333333</div> <div style="display:block;">444444</div> </div> </body> </html>
