jquery事件链式写法
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> Hello JQuery</title>
<script lang ="javascript" type ="text/javascript" src ="JQuery/jquery-2.1.0.min.js">
</script>
<style type ="text/css">
.divFrm {
width:300px;border: 2px solid #625d5d; font-size:12px;
}
.divTitle {
background-color:#08fcfc;padding :5px;
}
.divContent {
padding:5px;display:none;
}
.divCurrColour {
background-color:red;
}
</style>
</head>
<body>
<!-- 添加jquery的引用文件-->
<script type ="text/javascript">
$(function () {
$(".divTitle").click(function () {
$(this).addClass("divCurrColour")
.next(".divContent").css("display", "block")
});
});
</script>
<div class = "divFrm">
<div class ="divTitle"> 主题</div>
<div class ="divContent">
<a href="http://baidu.com">链接一</a><br />
<a href="http://jquery.com">链接二</a><br />
<a href="http://www.google.com/">链接三</a>
<!-- <a></a> 链接的标记字段-->
</div>
</div>
</body>
</html>
说明:
中间红色的为事件的链式写法,实现两个事件:
1、改变 <div class ="divTitle"> 主题</div> 的颜色
2、显示 <div class ="divContent">
中间通过.next链接起来
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。