锋利的Jquery(点击显示隐藏div)
点击显示隐藏div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>--</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:;
}
div a{
background : #;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
</body>
</html>
锋利的Jquery(点击显示隐藏div)的更多相关文章
- jquery 点击空白处隐藏div元素
<style type="text/css">.pop {display:none;width: 200px;height: 130px;background: #08 ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- JS点击显示隐藏内容
JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
- HTML5--》点击显示隐藏内容
<details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...
- jQuery点击按钮实现div的隐藏和显示切换效果
<script type="text/javascript"> $(function(){ $('#click_event').click(function(){ i ...
- jQuery 点击显示再次点击隐藏
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- Jquery点击除了指定div元素其他地方，隐藏该div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...
- js jQuery显示隐藏div的几种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_36135335/article/d ...
- [jquery]显示隐藏div标签的几种方法
1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...
随机推荐
- 几道noip2018提高组初赛的题
以下做法来均自llj @Nicodafagood 一.单项选择题 7. 在一条长度为 1 的线段上随机取两个点,则以这两个点为端点的线段的期望 长度是( ).A. 1 / 2B. 1 / 3C. 2 ...
- NX二次开发-UFUN获取图纸视图最大边界和视图中心点UF_DRAW_ask_view_borders
NX9+VS2012 //获得视图的最大边界 ]; UF_DRAW_ask_view_borders(view_tag[j], view_borders); //获得视图原点 ]; ViewOrigi ...
- docker service 集群创建
docker service create /新建docker集群--name webwork /集群的名称--replicas 3/ 启动3个节点--network my-network/ netw ...
- jquery判断对象是undifined，判断对象是null
判断对象是undifined: var aaa = undefined; if (typeof(aaa) == "undefined") { ... } typeof 返回的是字符 ...
- 1、linux常用命令的英文单词缩写
1.linux常用命令的英文单词缩写 命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户 rpm:redhat pa ...
- git学习记录2（远程库管理）
学习参考地址:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 本编随笔只是自己对 ...
- 20140502 static_cast和dynamic_cast的类型检查 双链表建立，删除，打印
1.static_cast和dynamic_cast的类型检查 static_cast的类型检查:只检查无关类之间的转换 CBaseY* pY1 = static_cast<CBaseY*> ...
- 解析css3 shake 抖动样式
前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下: CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的 ...
- JAVA利用JXL导出 EXCEL (在原有的excel模板上把数据导到excel上)
添加依赖 <dependency> <groupId>net.sourceforge.jexcelapi</groupId> <artifactId>j ...
- Codeforces 479【E】div3
题目链接:http://codeforces.com/problemset/problem/977/E 题意:就是给你相连边,让你求图内有几个环. 题解:我图论很差,一般都不太会做图论的题.QAQ看官 ...