JQuery树形目录制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<style type="text/css">
.menu{width:300px;}
.has_children{background:#555; color:#fff; cursor:pointer;}
.highlight{color:#fff; background:green;}
.div{padding:0px; margin:10px 0px;}
div a{background:#888; display:none; float:left; width:300px;} </style>
<div class="menu">
<div class="has_children">
<span>第一章-认识 JQuery</span>
<a>1.1-Javascript和Javascript库</a>
<a>1.2-加入Jquery代码</a>
<a>1.3-编写简单的JQUERY代码</a>
<a>1.4-JQUERY对象和其他库的冲突</a>
<a>1.5-JQUERY对象和DOM对象</a>
<a>1.6-JQUERY开发工具和插件</a>
<a>1.7-小结</a>
</div> <div class="has_children">
<span>第二章-认识 JQuery</span>
<a>12.1-Javascript和Javascript库</a>
<a>12.2-加入Jquery代码</a>
<a>12.3-编写简单的JQUERY代码</a>
<a>12.4-JQUERY对象和其他库的冲突</a>
<a>12.5-JQUERY对象和DOM对象</a>
<a>12.6-JQUERY开发工具和插件</a>
<a>12.7-小结</a>
</div> <div class="has_children">
<span>第二章-认识 JQuery</span>
<a>123.1-Javascript和Javascript库</a>
<a>124.2-加入Jquery代码</a>
<a>125.3-编写简单的JQUERY代码</a>
<a>126.4-JQUERY对象和其他库的冲突</a>
<a>127.5-JQUERY对象和DOM对象</a>
<a>128.6-JQUERY开发工具和插件</a>
<a>129.7-小结</a>
</div> </div>
<script type="text/javascript">
$(document).ready(function(){
//原理说明:
/*
首先我们要找到这个菜单的标题,在他的身上加上一个单击事件,
之后的$(this)就代表着这个has_children对象,给他加上一个选中的状态,并将这个菜单下的所有的a标签显示出来;
写到这一步,我们的菜单就基本上写完了,但是现在有个问题就是我们单击后菜单就不会回去了,下面们我们在使用
siblings()这个函数也就是遍历同胞元素,去除掉所有同胞元素的样式,并且他们的菜单内容全部的隐藏掉!
*/
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end();
$(this).siblings().removeClass("highlight").children("a").hide();
});
});
</script>
</body>
</html>
JQuery树形目录制作的更多相关文章
- JQuery树形目录插件Dynatree
最近做网页需要做一个树形目录功能.找了一下发现有很多JQuery插件都可以实现这个功能.选了一个自己觉得最满意的插件Dynatree做个学习笔记. 可以把静态的html转成树形目录,还可以动态创建添加 ...
- jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- [moka同学收藏]Vim升华之树形目录插件NERDTree安装图解
无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ub ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- Vim升华之树形目录插件NERDTree安装图解
来源:CSDN 作者:mybelief321 无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.他说是一个插件叫NERDTree,安装执行后的效果 ...
- vim 树形目录插件NERDTree安装及简单用法
转自: http://blog.csdn.net/love__coder/article/details/6659103 1,安装NERDTree插件 先下载,官网:http://www.vim.or ...
- vim插件:显示树形目录插件NERDTree安装 和 使用
下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...
- jQuery手风琴的制作!!
jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...
- 40款非常棒的 jQuery 插件和制作教程(系列一)
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象.jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...
随机推荐
- cobbler_web安装
- C# 实现关闭按钮隐藏窗体而不退出
private void OpenNewMxdFrm_FormClosing(object sender, FormClosingEventArgs e) { e.Cancel = true; thi ...
- Java生成缩略图Thumbnailator(转载)
转自(http://rensanning.iteye.com/blog/1545708) Thumbnailator 是一个为Java界面更流畅的缩略图生成库.从API提供现有的图像文件和图像对象的缩 ...
- 【Android - V】之ViewPager的使用
ViewPager是Android V4包中的一个控件,常常用来作为首页的滚动广告,也常常结合Fragment来实现页面的切换效果. ViewPager和ListView有很多相似的地方,都是适配器控 ...
- jquery 实现页面拖拽并保存到cookie
实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中. 好了,开始. 1.准备工作. a.jquery(1.7 ...
- WCF服务发布到IIS时候,只能根据hostname访问,不能根据IP地址访问的解决办法
本文转载:http://www.cnblogs.com/deerbox/archive/2013/05/13/3076248.html 环境: VS2010 sp1,.net framework 4. ...
- Memo打印
加入Printers单元, ; Left ; y ;; do begin Printer.Canvas.TextOut(x,y,Memo1.Lines[i]) ...
- 有关Transaction not successfully started问题解决的方法
我的项目配置:struts2+hibernate3.3+spring3.2.5 主要问题:在进行更新和提交操作时出现下面异常 org.springframework.transaction.Trans ...
- DECIMAL Data Type
In MySQL, DECIMAL(M,D) and NUMERIC(M,D) are the same, and both have a precision of exactly M digits. ...
- 常用Content-type汇总
Content-Type,内容类型,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件.这里汇总一下常用的,所有资料来源于网络,未经测试: 文件后缀 处理方式 .* ...