jquery级联菜单效果
jquery在前台客户端的处理有很大的优势,其类库小但功能实用,受到Web前端开发人员很大的青睐,下面是一个级联菜单和局部刷新的小例子
前端html代码如下
js代码如下$(Document).ready(function(){ var as = $("ul > a"); as.click(function(){ //在文档加载之后为ul下的所有a节点注册鼠标点击事件 var aNode = $(this); var lis = aNode.nextAll("li"); lis.toggle("show"); //当a被点击其所有的兄弟节点li隐藏或显示 }); var as = $("li > a"); //得到所有li节点下的a节点元素 as.click(function(){ //为每个a节点元素注册鼠标点击事件 var aNode = $(this); $("#content").load(aNode.attr("id")); //当鼠标点击时,为id为content的div加载文档 });});css代码如下li{ list-style: none; /*取出小黑点*/ margin-left: 10px; display: none; text-decoration: none; /*去掉下划线*/}a { text-decoration: none;}