toggleClassメソッドを利用しクラスの追加・削除を行う平成30年 9月 12日 作成
概略
表示・非表示等の切り替え作業を簡潔に行う処理方法に「toggleClassメソッド」がある。その詳細を学ぶ。
手段
JavaScriptにて実現可能。
表示・非表示の切り替え（トグル処理）を簡潔に行うにはjQueryの「toggleClassメソッド」が適切な模様。
toggleClassメソッドにクラス名を指定すればOK。
実装方法
構文
toggleClass（クラス名）
HTML
// リンクの場合 <label id="button">ボタン</label>
CSS
label#button {
font-size: 1.4rem;
width: 10rem;
height: 10rem;
line-height: 10rem;
text-align: center;
border: 0.1rem solid #C3C3C3;
border-radius: 50%;
cursor: pointer;
display: inline-block;
}
label.active {
color: #FFFFFF;
background-color: #FF0000;
}
jQuery
$(function(){
$("#button").click(function(){
$(this).toggleClass("active");
});
});
デモ
考察
とりあえずは目標達成できたが、第2引数にtrueやfalseを設定する方法や他にも設定があるみたいなので、次回学習する。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
