クルーデザイン

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

jQuery

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

投稿日:

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

こんなイメージのものです。

 

HTML(クリックで色が付くメニュー)

「トップへ戻る」のボタンを作ります。
最上部に「page-top」というクラスを付けておきます。
「href」で設定しているリンクは何でもOKです。
後に出てくるjQueryの処理でこのリンクはキャンセルされます。

 

CSS(クリックで色が付くメニュー)

CSSです。

一番上の「active」クラスを追加したり削除したりすることで、クリックしたメニューに色を付けていきます。

後は特別なものは何もありません。
「li」を四角く装飾する類のものですね。

 

jQuery(クリックで色が付くメニュー)

[ 2行目 ]
「li」がクリックされた時に内部の処理が実行されます。

[ 3行目 ]
すべての「li」から「active」クラスを削除します。
これは前回クリックされて「active」クラスが追加された箇所をクリアしているイメージですね。

[ 4行目 ]
「$(this)」でクリックされたものを表現できます。
意味としては「クリックされたliにactiveクラスを追加する」になります。

少ない行で動的なことが出来ますね!
サンプルも作っているので見てくださいね。

See the Pen jQuery クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass) by clue-design (@clue-design) on CodePen.0

大きい画面でみたい方はこちら

-jQuery

執筆者:

関連記事

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

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

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

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

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

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

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


comment

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