Jquery效果，点击切换文字，变换背景颜色，再次点击，文字和背景色变回来，求大神，谢谢

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击切换文字，变换背景颜色，再次点击，文字和背景色变回来</title>
<style>
body {margin:0; padding:0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
ol,ul {list-style:none;}
a {color:#252525; text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}

.cck {
color: #FFFFFF;
background-color: #0066FF;
text-align: center;
height: 90px;
width: 25px;
font-size: 14px;
margin:25px;
font-family: "微软雅黑";
line-height: 20px;
}
.cck:hover {
background-color: #0099FF;
cursor:pointer;
}
</style>
</head>
<script type="text/javascript" src="http://www.52pk.com/style/v7/js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$('.cck').click(function(){
$('.cck').html('点击关闭');
});
});
</script>
<body>
<div class="cck">触发按钮</div>
</body>
</html> 展开

 我来答

1个回答

#合辑# 面试问优缺点怎么回答最加分？

匿名用户
2015-02-21

展开全部

<!DOCTYPE HTML>
<html>
<meta charset="UTF-8" />
<head>
<title>YuGiOh Power Of Chaos</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 \5b8b\4f53, Arial, sans-serif;
}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p
	{
	padding: 0;
	margin: 0;
}

ol,ul {
	list-style: none;
}

a {
	color: #252525;
	text-decoration: none;
}

a:hover {
	color: #ba2636;
	text-decoration: underline;
}

.cck {
	color: #FFFFFF;
	background-color: #0066FF;
	text-align: center;
	height: 90px;
	width: 25px;
	font-size: 14px;
	margin: 25px;
	font-family: "微软雅黑";
	line-height: 20px;
}

.cck:hover {
	background-color: #0099FF;
	cursor: pointer;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
	jQuery (function ($)
    {
	    $ ('.cck').toggle (function ()
	    {
		    $ (this).text ('点击关闭').css ('background-color', 'red');
	    }, function ()
	    {
		    $ (this).text ('触发按钮').css ('background-color', '#0066FF');
	    });
    });
</script>
</head>
<body>
	<div class="cck">触发按钮</div>
</body>
</html>