本實例使用Jquery實現DIV切換，這是第二版本，點擊這裡看效果：http:///keleyi/phtml/divqiehuan2.htm
版本一：http:///keleyi/phtml/divqiehuan.htm
版本二完整代碼如下，可復制後保存到html文件查看效果。
<!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">
<head>
<title>Jquery DIV切換 -</title>
<script src="http:///keleyi/pmedia/jquery-1.8.2.min.js" type="text/javascript"></script>
<style type="text/css">
.frame_keleyi_com{width:400px;margin-top:100px;margin-left:auto;margin-right:auto;border:1px solid silver;}
.keleyi_com{height:200px;padding:20px; }
.title_frame td{ padding:0px;margin:0px;border:0px;}
.title_keleyi_com{width:98px; background-color:silver}
.title_keleyi_com a{color:#333;text-decoration:none;}
.title_keleyi_com a:hover {text-decoration:underline;}
.titleon_keleyi_com{background-color:White;}
.titleon_keleyi_com a{color:black}
</style>
</head>
<body>
<div class="frame_keleyi_com">
<div class="title_frame"><table><tr>
<td class="title_keleyi_com titleon_keleyi_com" onmousemove ="keleyi_comchange(0)"><a href="http:///tag/javascript.htm" title="" target="_blank">Jquery</a></td>
<td class="title_keleyi_com" onmousemove="keleyi_comchange(1)"><a href="http:///it/sqlserver/" title="" target="_blank">MSSQL</a></td>
<td class="title_keleyi_com" onmousemove="keleyi_comchange(2)"><a href="http:///it/dotnet/" title="" target="_blank">.NET</a></td>
<td class="title_keleyi_com" onmousemove="keleyi_comchange(3)"><a href="http:///tag/it.htm" title="" target="_blank">計算機網絡</a></td></tr></table></div>
<div id="keleyi_com">
<div class="keleyi_com" ><a href="http:///dev/9c4dbaff0fca9c64.htm" title="" target="_blank">
右側彈出導航菜單完整代碼</a><br /><a href="http:///dev/c975cedd1ce1bd37.htm" title="">本效果相關文章</a></div>
<div class="keleyi_com" style="display:none;">
<a href="http:///article/wenzhang34.htm" title="" target="_blank">SQL2005使用nvarchar(max)（大值數據類型）等,而不使用ntext等</a></div>
<div class="keleyi_com" style="display:none;">
<a href="http:///article/wenzhang64.htm" title="" target="_blank">web.config中forms的屬性timeout的單位</a>
<br /><br /><a href="http:///article/wenzhang28.htm" title="" target="_blank">怎樣實例化泛型，關於泛型的new()約束</a>
</div>
<div class="keleyi_com" style="display:none;"><a href="http:///article/wenzhang39.htm" title="" target="_blank">私有IP地址段</a></div>
</div>
</div>
<script type="text/Javascript">
function keleyi_comchange(i) {
$(".keleyi_com").hide().eq(i).show();
$(".title_keleyi_com").removeClass("titleon_keleyi_com").eq(i).addClass("titleon_keleyi_com");
}
</script>
</body>
</html>