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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
微信小程序实现购物车功能
Nov 18 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python实现八皇后问题示例代码
2018/12/09 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
python字符串判断密码强弱
2020/03/18 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
简历里的自我评价
2014/01/31 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
房屋认购协议书
2015/01/29 职场文书
法人身份证明书
2015/06/18 职场文书
计算机教师工作总结
2015/08/13 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
Java版 简易五子棋小游戏
2022/05/04 Java/Android