- 使用removeClass()删除样式
实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jquery的removeClass()移除样式</title>
<script src="jquery-1.11.3.js"></script>
<style>
.myClass{
font-weight: 900;
color:red;
}
.another{
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<p title="你喜欢的运动" class="myClass another">请选择你喜欢的运动?</p>
<ul id="sport">
<li>足球</li>
<li>王者荣耀</li>
<li>乒乓球</li>
<li>排球</li>
</ul>
<script>
$(function(){
/*removeAttr()移除的是属性*/
/*$("p").removeAttr("class");*/
/*removeClass()移除的是class属性的值*/
$("p").removeClass("myClass");
});
</script>
</body>
</html>
注意:removeAttr()移除的是属性。removeClass()移除的是class属性的值。
2. 使用toggleClass()切换样式
实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jquery的toggleClass切换样式</title>
<script src="jquery-1.11.3.js"></script>
<style>
.myClass{
font-weight: 900;
color:red;
}
.another{
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<p title="你喜欢的运动" class="myClass">请选择你喜欢的运动?</p>
<ul id="sport">
<li>足球</li>
<li>王者荣耀</li>
<li>乒乓球</li>
<li>排球</li>
</ul>
<script>
$(function(){
/*给p标签绑定一个点击事件*/
$("p").click(function(){
/*切换样式:指的是该样式在有和没有之间进行切换*/
$("p").toggleClass("another");
});
});
</script>
</body>
</html>
注意:toggleClass()指的是该样式在有和没有之间进行切换。