简单左侧导航 适合dt dd标签
最近学习Jquery... 写了一个简单的左侧导航。 感觉比较简单易用。 适合后台人员拿去修改/Files/peng-li/左侧导航菜单.rar
<!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></title>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
</head>
<body>
<div id="main1_left">
<h2>系统常规管理</h2>
<dl>
<dt class="grxxmb">个人信息面板
</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="khgl">客户管理
</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="xkgl">销控管理
</dt>
<dd style="margin-top:-3px;"><a href="#">楼盘平面图</a></dd>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="lcgl">流程管理
</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="gwgl">公文管理</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="xsgj">销售工具</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="grxx">个人信箱</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="tjfx">统计分析</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
<dt class="xtsz">系统设置</dt>
<dd><a href="#">销控面板</a></dd>
<dd><a href="#">销售指引</a></dd>
<dd><a href="#">换房管理</a></dd>
<dd><a href="#">退房管理</a></dd>
<dd><a href="#">更名管理</a></dd>
<dd><a href="#">统计报表</a></dd>
</dl>
</div>
<script type="text/javascript">
$(function () {
$("dd").hide("fast");
$("dt").css("cursor","hand").bind("click", function (event) {
var eventDT = event.srcElement;
if($(eventDT).nextUntil("dt").is(":visible")){
}else{
$("dd").hide("normal");
$(eventDT).nextUntil("dt").show("normal");
}
})
})
</script>
</body>
</html>
其基本原理就是点击dt时 把所有dd隐藏。 然后同时把触发该事件的dt下的dd显示
本来想放一个效果预览的。。但是没有找到在哪添加 汗。。。只好各位同学自己把代码沾下来看咯。。
