クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery CSSクラスの追加と削除

投稿日:

jQueryを使うとHTMLやCSSだけでは実現できないような動きをサイトに付けることができます。
今回は例としてボタンクリックされた時に「CSSのクラスを追加」もう一度クリックすると「CSSクラスを削除」する処理をjQueryで実現してみようと思います。

追加するCSSクラスは分かりやすいように、背景が赤色になる「red」というクラスを作ります。
ボタンをクリックするとボタンが赤色に、もう一度クリックすると元の色に戻るという動きです。
この動きを応用していくと、動的でリッチなサイトを制作できるようになります。

HTML( CSSクラスの追加と削除)

まずはjQueryの参照をしてください。
ダウンロードしたものを参照しても、CDNを参照してもOKです。
後はボタンを用意しましょう。

jQueryで操作をしやすくするためにボタンには「target」というクラスをあらかじめ追加しています。
HTMLはこれでOKです。

スクリプト(CSSクラスの追加と削除)

スクリプト側は次のような記述になります。

[ 2行目 ]
「target」クラスを持っている要素がクリックされたときの処理のイベントを記述しています。
「target」クラスを持っているのはボタンになりますので、ボタンがクリックされた時にこの関数が呼び出されるイメージに近いですね。

[ 3行目 ]
どのプログラムでもおなじみの条件分岐「if」です。
「hasClass」という関数は引数のクラスがその要素に含まれているかを確認する関数です。
はじめに付いている「!」は否定の意味になります。

まとめると「 “target” クラスを持っている要素に “red” クラスが含まれていなければ正」というif文になります。

[ 4行目 ]
「addClass」関数は引数の「クラスを追加する」という関数です。
「上記if文が正の場合は “target” クラスを持っている要素に “red” クラスを追加する」という意味になります。

[ 6行目 ]
上記if文にマッチしない時の処理です。
if文にマッチしない場合「”target”クラスを持っている要素から “red”クラスを削除する」という意味になります。

簡単ですね!

サンプルも作成しています。

-jQuery

執筆者:

関連記事

jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

jQuery アコーディオンメニューを自作サンプル(slideToggle)

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。 プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。 プラグインから …

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

jQuery プラグインlazyload.js(画像の遅延読み込み)

スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。 あれは画像の遅延読み込みという事をしているそうです。 ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み …


comment

メールアドレスが公開されることはありません。