导读:(1)功能描述在页面中,增加一个<div>元素标记,用户单击该元素时,变换其字体和背景色,再次单击时,恢复其初始的字体和背景色。(2)实
(1)功能描述
在页面中,增加一个<div>元素标记,用户单击该元素时,变换其字体和背景色,再次
单击时,恢复其初始的字体和背景色。
(2)实现代码
新建一个HTML文件1-4.html,加入如下代码:
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件的链式写法</title>
<script src="JScript/jquery-1.8.2.min.js"
type="text/javascript"></script>
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.defcol{ padding:6px;background-color:#EEE;}
.curcol{ padding:6px;background-color:#CCC;color:#FFF}
</style>
<script type="text/javascript">
$(function() {
$(".defcol").click(function() {
$(this).toggleClass("curcol");
});
});
</script>
</head>
<body>
<div class="iframe">
<div class="defcol">标题</div>
</div>
</body>
</html>
(3)页面效果