Jquery事件的連接使用示例

更新時(shí)間：2013年06月18日 17:24:11 作者：

本文以展開圖片和收縮圖片為例為大家介紹下Jquery事件的連接的使用方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助

 
<!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="圖片設(shè)置.htm">圖片設(shè)置</a><br /> 
<a href="展開圖片和收縮圖片.htm">展開圖片和收縮圖片</a><br /> 
</div> 
</div> 
</body> 
</html> 

實(shí)現(xiàn)以下效果

點(diǎn)擊它，會(huì)顯示如下效果

您可能感興趣的文章:

相關(guān)文章

jquery append與appendTo方法比較
這篇文章主要介紹了jquery append與appendTo方法區(qū)別的相關(guān)資料,需要的朋友可以參考下
2017-05-05
探討在JQuery和Js中,如何讓ajax執(zhí)行完后再繼續(xù)往下執(zhí)行
查了不少資料，最后，還是jquery指南的書上找到了詳細(xì)的參數(shù)（async: false,），做好后，示例代碼放上，如下所示，需要的朋友可以參考下
2013-07-07
jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
jquery 設(shè)置style:display的方法
這篇文章主要介紹了jquery 設(shè)置style:display的方法,需要的朋友可以參考下
2015-01-01
jQuery中的each()詳細(xì)介紹(推薦)
jquery中的each()非常好用，用起來非常的爽，下面小編給大家介紹jquery中each()的用法詳細(xì)介紹，感興趣的朋友一起看看吧
2016-05-05
ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用
2009-03-03
jQuery層級(jí)選擇器實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了jQuery層級(jí)選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
jquery mobile頁面跳轉(zhuǎn)后樣式丟失js失效的解決方法
用ajax跳轉(zhuǎn)的時(shí)候，目標(biāo)頁的css以及js都失效，這是由于page之外的代碼都不會(huì)加載，所以導(dǎo)致在page外的js和css都失效，解決方法如下
2014-09-09
jQuery實(shí)現(xiàn)的鼠標(biāo)滑過彈出放大圖片特效
最近項(xiàng)目遇到個(gè)需求，需要的效果是，鼠標(biāo)移到縮略圖上會(huì)顯示該圖的大圖，并且大圖跟隨鼠標(biāo)移動(dòng)；或是移動(dòng)到提示文字上，也可以顯示圖片。經(jīng)過一番思索，用下面的方法實(shí)現(xiàn)了本效果，這里分享給大家。
2016-01-01
juqery 學(xué)習(xí)之四篩選查找
juqery 學(xué)習(xí)之四篩選查找，學(xué)習(xí)jquery的朋友可以參考下。
2010-11-11