编程 Javascript

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 相关文章推荐

xss文件页面内容读取(解决)

Nov 28 Javascript

jQuery队列控制方法详解queue()/dequeue()/clearQueue()

Dec 02 Javascript

一个简单的Ext.XTemplate的实例代码

Mar 18 Javascript

js数字转换为float,取N位小数

Feb 08 Javascript

javascript避免数字计算精度误差的方法详解

Mar 05 Javascript

javascript+canvas实现刮刮卡抽奖效果

Jul 29 Javascript

分享一个原生的JavaScript拖动方法

Sep 25 Javascript

jQuery实现div跟随鼠标移动

Aug 20 jQuery

react native与webview通信的示例代码

Sep 25 Javascript

详解vue-cli下ESlint 配置说明

Sep 03 Javascript

JS实现基本的网页计算器功能示例

Jan 16 Javascript

什么是SOLID

Mar 24 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

PHP5多态性与动态绑定介绍

2015/04/03 PHP

PHP实现读取文件夹及批量重命名文件操作示例

2019/04/15 PHP

thinkPHP5.1框架使用SemanticUI实现分页功能示例

2019/08/03 PHP

yii 框架实现按天，月，年，自定义时间段统计数据的方法分析

2020/04/04 PHP

基于jquery的bankInput银行卡账号格式化

2012/08/22 Javascript

javascript的offset、client、scroll使用方法详解

2012/12/25 Javascript

Javascript基础函数“重载” 详细介绍

2013/10/25 Javascript

JavaScript获取页面中超链接数量的方法

2015/11/09 Javascript

JS简单编号生成器实现方法(附demo源码下载)

2016/04/05 Javascript

AngularJs 弹出模态框（model）

2016/04/07 Javascript

Bootstrap每天必学之附加导航（Affix）插件

2016/04/25 Javascript

jQuery实现加入收藏夹功能(主流浏览器兼职)

2016/12/24 Javascript

JavaScript实现简单的树形菜单效果

2017/06/23 Javascript

ztree简介_动力节点Java学院整理

2017/07/19 Javascript

Node.js如何实现注册邮箱激活功能 (常见)

2017/07/23 Javascript

详解使用element-ui table组件的筛选功能的一个小坑

2018/11/02 Javascript

原生js实现公告滚动效果

2021/01/10 Javascript

vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）

2019/10/15 Javascript

python二叉树遍历的实现方法

2013/11/21 Python

Python实现多线程抓取妹子图

2015/08/08 Python

Python编程入门之Hello World的三种实现方式

2015/11/13 Python

Python内置函数 next的具体使用方法

2017/11/24 Python

python使用xpath中遇到：到底是什么？

2018/01/04 Python

python实现大文本文件分割

2019/07/22 Python

Python爬虫学习之翻译小程序

2019/07/30 Python

scrapy爬虫:scrapy.FormRequest中formdata参数详解

2020/04/30 Python

Keras—embedding嵌入层的用法详解

2020/06/10 Python

django restframework serializer 增加自定义字段操作

2020/07/15 Python

webView加载html图片遇到的问题解决

2019/10/08 HTML / CSS

澳大利亚购买最佳炊具品牌网站：Cookware Brands

2019/02/16 全球购物

ECCO俄罗斯官网：北欧丹麦鞋履及皮具品牌

2020/06/26 全球购物

生物技术毕业生自荐信

2013/10/23 职场文书

服务之星获奖感言

2014/01/21 职场文书

大学毕业感言100字

2014/02/03 职场文书

2014年库房工作总结

2014/11/26 职场文书

入伍通知书

2015/04/23 职场文书