$(".btn").click(function () { $(".right p:eq(0)").css('background','red').toggle(); });??
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.right p{
width:130px;
height:30px;
color: #b1bdbd;
text-align:center;
line-height:30px;
border:1px groove #f0ad4e;
}
.right p:hover{
cursor: pointer;
}
/*备用类*/
.add{
background: #00B83F;
border-radius:10px ;
transform: translate(80px,30px) rotate(90deg);
}
.main{
font-size:120%;
color:red;
}
.myname{
margin-top:150px;
border:1px solid red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript"src="../js/jquery-2.0.0.min.js"></script>
</head>
<body>
<h2>.removeClass()方法</h2>
<div class="right">
<p>imoocClassA</p>
<p>imoocClassB</p>
</div>
<button class="btn">添加</button>
<div class="myname">
<p>这是一个段落。</p>
<p class="main">这是另一个段落。</p>
<button id="add">添加"main"类</button>
<button id="remove">移除"main"类</button>
</div>
<script type="text/javascript">
// toggleClass添加,删除类的切换功能
$("p:last").click(function () {
$(this).toggleClass("add");
});
// toggle有显示、影藏切换的功能
$(".btn").click(function () {
$(".right p:eq(0)").css('background','red').toggle();
});
$("#add").click(function(){
$(".myname>p").toggleClass("main",true);
});
$("#remove").click(function(){
$(".myname>p").toggleClass("main",false);
});
</script>
</body>
</html>