Jquery事件的连接使用示例


Posted in Javascript onJune 18, 2013
<!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> 
<title>jQuery事件的连接</title> 
<style type="text/css"> 
.divFrame{ width:260px; border:1px solid #666; font-size:10px } 
.divTitle{ background-color:#eee; padding:5px} 
.divContent{ padding:5px; display:none} 
.divCurrColor{ background-color:Red} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
$('.divTitle').click(function () { 
$('.divTitle').addClass('divCurrColor') 
.next('.divContent').css('display','block') 
}) 
}) 
</script> 
</head> 
<body> 
<div class="divFrame"> 
<div class="divTitle">主题</div> 
<div class="divContent"> 
<a href="图片设置.htm">图片设置</a><br /> 
<a href="展开图片和收缩图片.htm">展开图片和收缩图片</a><br /> 
</div> 
</div> 
</body> 
</html>

实现以下效果
Jquery事件的连接使用示例 
点击它,会显示如下效果
Jquery事件的连接使用示例
Javascript 相关文章推荐
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
js读取本地文件的实例
Dec 22 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
JS中移除非数字最多保留一位小数
May 09 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
jquery属性过滤选择器使用示例
Jun 18 #Javascript
js实现的切换面板实例代码
Jun 17 #Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 #Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 #Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 #Javascript
js二级地域选择的实现方法
Jun 17 #Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 #Javascript
You might like
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
28个JS验证函数收集
2010/03/02 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Python多进程写入同一文件的方法
2019/01/14 Python
利用python生成照片墙的示例代码
2020/04/09 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
flask框架中的cookie和session使用
2021/01/31 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
房地产销售计划书
2014/01/10 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
大学生个人求职信
2014/06/02 职场文书
企业公益活动策划方案
2014/08/24 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang