<!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>Jquery的toggleClass效果的文字切换</title>
<style>
* {margin:0; padding:0;}
ol,ul,li{list-style:none;}
em,i{font-style:normal;}
.sp { width:455px; border:2px solid #ddd; padding:15px; margin:0 auto;}
.sp p {
line-height:22px;
text-indent: 2em;
margin-bottom:12px;
}
.on p { color:#0066FF;}
.sp span { display:block; width:88px; height:32px; text-align:center; border:1px solid #ddd; line-height:32px;}
.sp span:hover { background-color:#efefef; cursor:pointer;}
</style>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="sp">
<p>占领战可以说是今年这场PK赛里面最为快节奏的一场赛事了。在一定时间内，两方谁先获得最高分就能取得小组的胜利；在这样一场较量中，拼的也就是一个快字了。在这样的比赛中，高机动性的职业可能就会呈现较大的优势。比拼手速的时间到了，大家赶紧动起来！</p>
<p> 在小组赛中，保护队长战可谓是集齐了队长的一百种死法啊！各种大招一波带啦，队长狗带；抓住队长啦，队长狗带；不小心落单啦，队长狗带；犊子护不住啦，队长狗带……让我们先心疼队长一分钟！不得不说，保护队长战实在是非常考验大家在团队中的机动性和对全局观的控场性的；恩，队长的逃跑能力也是要非常的666才行。不过，到目前为止的保护队长战，各个小组之间的竞争还是十分激烈的，看来今年大家的实力都相当之强劲啊！</p>
<span class="btt">黑色</span>
</div>
<script>
$(document).ready(function(){
$(".btt").click(function(){
$(".sp").toggleClass("on");
$(this).html("蓝色");
});
});
</script>
</body>
</html>
========================虽然点击按钮有变色效果了，但是这个字怎么切换不回来了。点击按钮，字变“蓝色”，再次点击，又变回”黑色“。这样
狐的传说
相关分类