<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0; } #card{ float:left; margin-left:50px; } #tit { 300px; float:left; background:#333; color:#fff; } #tit h3{ 100px; height:40px; line-height:40px; float:left; } .on{ background:#ccc; color:#333; } #content{ background:#ccc; } #content div{ display:none; float:left; background:#ccc; } ul{ list-style:none; } #content .one{ display:block; } </style> </head> <body> <div id="card"> <div id="tit"> <h3 class="on" onmouseover="show(0)">标题一</h3> <h3 onmouseover="show(1)">标题二</h3> <h3 onmouseover="show(2)">标题三</h3> </div> <div id="content"> <div class="one"> <ul> <li>内容一内容一内容一内容一内容一</li> <li>内容一内容一内容一内容一内容一</li> <li>内容一内容一内容一内容一内容一</li> </ul> </div> <div> <ul> <li>内容二内容二内容二内容二内容二</li> <li>内容二内容二内容二内容二内容二</li> <li>内容二内容二内容二内容二内容二</li> </ul> </div> <div> <ul> <li>内容三内容三内容三内容三内容三</li> <li>内容三内容三内容三内容三内容三</li> <li>内容三内容三内容三内容三内容三</li> </ul> </div> </div> </div> <script> var h3s=document.getElementsByTagName("h3"); var divs=document.getElementById("content").getElementsByTagName("div"); function show(num){ for(var i=0; i<h3s.length;i++){ if(i==num){ h3s[num].className="on"; divs[num].style.display="block"; }else{ h3s[i].className=""; divs[i].style.display="none"; } } } </script> </body> </html>