JS・jQuery

jQueryを使用してclassを動的に追加・削除する

webサイトにクリックされたらclassを追加や何かしらのアクションでclass追加・削除する方法を紹介します。
今回はjQueryを使用して、classを追加・削除してみましょう!

jQueryでclassを動的に追加・削除する

jQueryでclassを追加する

要素にclassを追加する。
要素の部分には、IDやclass,pなどのタグが指定します。

$('要素').addClass('class名');

jQueryでclassを削除する

要素からclassを削除する。
要素の部分には、IDやclass,pなどのタグが指定します。

$('要素').removeClass('class名');

jQueryでclassを追加・削除する

要素から指定のclassがあれば削除、なければclassを追加する。
要素の部分には、IDやclass,pなどのタグが指定します。
ボタンをクリックしたら、隠れたコンテンツを表示するときなどによく使います。

$('要素').toggleClass('class名');

 

 

クリックするとクラスを追加し、隠していたコンテンツを表示する方法も下記記事で紹介しています。
コピペで簡単にできるクリックしたら展開するアコーディオンメニュー【jQuery】

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)