<!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"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><head><title>jQuery</title><style>ul, li{list-style:none;}#linTab ul li{float:left;width:50px;}.clearBoth{clear:both;}.on{display:block;}.none{display:none;}</style><script src="./jquery/jquery-1.7.1.min.js"></script><script>$(document).ready(function(){ $change_li = $(".linListTab li"); $change_li.each(function(i){ $(this).mouseover(function(){ $(this).addClass("on").siblings().removeClass("on"); $(".linBoxListContent dl").eq(i).show().siblings().hide(); }); });});</script></head><body><div id="linTab"> <div class="linListTab"> <ul> <li class="on"><a href="javascript:void(0)">第一</a></li> <li><a href="javascript:void(0)">第二</a></li> <li><a href="javascript:void(0)">第三</a></li> </ul> <br class="clearBoth" /> </div> <div class="linBoxListContent"> <dl> <dd>1111</dd> </dl> <dl class="none"> <dd>2222</dd> </dl> <dl class="none"> <dd>3333</dd> </dl> </div></div></body></html>