demo : https://www.lenlop123.com/2020/09/19-addclass-removeclass-toggleclass_21.html
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
</style>
<div id="div_1">This is div 1</div>
<div id="div_2">This is div 2</div>
<div id="div_3">This is div 3</div>
<div id="div_4">This is div 4</div>
<input id="but_addClass" type="button" value="addClass"><br>
<input id="but_removeClass" type="button" value="removeClass"><br>
<input id="but_toggleClass" type="button" value="toggleClass"><br>
<script>
$(document).ready(function () {
// addClass
$("#but_addClass").click(function () {
$("#div_1,#div_2").addClass("blue");
$("#div_3").addClass("important");
$("#div_4").addClass("important blue");
});
// removeClass
$("#but_removeClass").click(function () {
$("#div_4").removeClass("important");
});
// toggleClass
$("#but_toggleClass").click(function () {
$("#div_4").toggleClass("important");
});
});
</script>
0 Nhận xét