<!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链接起来