1、关键技术:html 实现布局;css 控制样式;jquery 实现功能;
2、重点技术:jquery 鼠标触摸到当前的<h3> 显示当前节点下一个节点的内容,隐藏别的节点<h3>其余的下一个节点内容
3、关键代码:
<script type="text/javascript">
$(function(){
$("#main h3").each(function(index){//循环遍历每一个h3节点
$(this).mousemove(function(){//注册当前节点的事件
$(this).css("background-color","#FCFCFD");//添加当前节点的样式
$(this).siblings("h3").css("background-color","#fff");//改变当前节点的兄弟H3节点的样式
$(this).next().slideToggle(0,function(){//关键 注册当前节点的下一个节点的滑动事件
$("#main div:eq("+index+")").slideDown(0).siblings("div").slideUp(0);
$(this).css("background-color","#FCFCFD");
$(this).siblings("div").css("background-color","#fff");
});
});
});
})
</script>
4、完整的代码(可运行)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2-vsdoc.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript"