DIV CSS 佈局教程網

Jquery DIV切換
編輯:JQuery常見問題     
本實例實用Jquery實現DIV切換,代碼如下,保存到html文件查看效果。或者點擊這裡看效果:http:///keleyi/phtml/divqiehuan.htm


<!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;}
.keleyi_com{ border:1px solid silver;height:200px;padding:20px; }
.title_keleyi_com{width:98px; background-color:Teal}
.title_keleyi_com a{color:#ddd; text-decoration:none;}
</style>
</head>
<body>
<div class="frame_keleyi_com">
<div><table><tr>
<td class="title_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></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();
}
</script>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved