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> 展开
<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个回答
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
