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以其插件众多.独特.轻量以及支持大规模的网站开发闻名 ...
随机推荐
- linux 设置 jdk环境变量
1.安装jdk tar zxvf jdk-8u112-linux-i586.tar.gz 2.设置环境变量:vi /etc/profile 输入i加入内容如下:export JAVA_HOME=/u ...
- 你能在windows上创建一个叫做AUX的文件夹吗?
Windows的文件名不能有如下这些特殊符号,这个大家都比较熟悉了. < (less than) > (greater than) : (colon) " (double quo ...
- ColorComboBox
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...
- java获取当前方法
1.获取当前方法堆栈,我们一般用 StackTraceElement[] stes = Thread.currentThread().getStackTrace(); 想要获取当前方法,切记不够灵活, ...
- Android&Java的学习新的等
学习资料 很久没写博客了.适逢这次Srtp项目学弟学妹们要学习Java与Android,我就总结一些学习的教材.方法,分享写材料与心得.纯个人观点,如有不周之处欢迎指出,大家共同探讨提高. *** 教 ...
- 零基础学习云计算及大数据DBA集群架构师【Linux系统环境及权限管理12.21-12.25】
从这周开始Linux的学习,老师是一位女老师,这到给了更多的信心,老师讲得很快,如果说只谈记命令的话是不多,但是要真正去理解,其实内容还是挺多的,我都是以老师讲的内容为主线,然后自己再看鸟哥的书做加深 ...
- insert当 sql语句里面有变量 为字符类型的时候 要3个单引号
set @InsertStr='INSERT INTO [dbo].[T_SchoolPercentMonth]([SchoolID],[MonthOfYear],[PercentNum]) VALU ...
- native跟volatile
native是告知编译器 该方法是其他语言实现的 比如C 呵呵 private native void CoutSea();没有方法实现部分的 volatile是Java语言的关键字,用在变量的声明中 ...
- listview的动态加载数据问题
1:调用adapter.notifyDataSetChanged()却不起作用 原因可能有一下几点 1.数据源没有更新,调用notifyDataSetChanged无效. 2.数据源更新了,但是它指向 ...
- 在企业级开发中使用Try...Catch...会影响效率吗?
感谢神啊.上帝及老天爷让我失眠,才能够有了本篇文章. 记得不久之前,公司一同事曾经说过:“如果是Winform开发,由于程序是在本地,使用try...catch不会有太大性能问题,可是如果是在web服 ...