「jQuery入門」addClass()とremoveClass()でCSSのクラスを追加、削除するサンプル

2017年11月4日

1.CSSコード
<style>
.cft{
//some code
}
.cssDemo1{
background-color:xxx;
}
.cssDemo2{
background-color:xxx;
}
.cssDemo3{
background-color:xxx
}
</style>
<script>

2.JSコード
$(function() {

$(“#btn1").click(function() {
$(“.cft").addClass('cssDemo1’);
});

$(“#btn2").click(function() {
$(“.cft").addClass('cssDemo2 cssDemo3’);
});
$(“#btn3").click(function() {
$(“.cft").removeClass('cssDemo1 cssDemo2 cssDemo3’);
});
});
</script>

3.htmlコード
<div class="cft">テストデータ　12345e</div>
<input type="button" id="btn1″ value="ボタン1″ /><br/>
<input type="button" id="btn2″ value="ボタン2″ /><br/>
<input type="button" id="btn3″ value="ボタン3″ /><br/>