jqueryをクリックして要素クラス名を変更する方法

WBOY
リリース: 2021-11-22 17:08:42
オリジナル
3194 人が閲覧しました

jquery は、クリックして要素のクラス名を変更するメソッドを実装します: 1. クリック イベントを要素にバインドし、イベント処理関数を指定します。 2. イベント処理関数で attr() メソッドを使用します。要素のクラス名を変更する場合、構文は「$(selector).attr('class','new class name');」です。

jqueryをクリックして要素クラス名を変更する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューター。

jquery がクリックして要素クラス名を変更する方法を実装する方法

1. ファイル名 test.html で新しい HTML ページを作成します。操作を実装するために使用される div 要素の機能。 HTML ページに jquery.min.js ファイルをロードします。このファイルには、jquery のすべてのメソッドが統合されています。ファイルが正常にロードされた場合にのみ、jquery のメソッドを使用できます。 HTML ページに新しい div 要素を作成し、それにクラス名 red を付けます。

クリック後の効果を明確にするため、class="red" の div の背景色は CSS で赤として定義され、クラス名が黒の場合は背景色も黒になります。

jqueryをクリックして要素クラス名を変更する方法

2. div 要素に onclick イベントを追加します。onclick イベントがトリガーされたら、change_color() メソッドを実行します。このメソッドは主にクラスを変更するために使用されます。部門

change_color()でdiv要素のクラスを変更するコードを記述し、divをクリックするとclass="red"がclass="black"に変更され、クラス変更機能を実現します。名前。主にjqueryのattr()メソッドを通じてクラスのクラス名を変更します。

jqueryをクリックして要素クラス名を変更する方法

コードを実行し、ブラウザで結果を表示します:

jqueryをクリックして要素クラス名を変更する方法

jqueryをクリックして要素クラス名を変更する方法

はvisibleで、divをクリックしてクラス名を変更する機能を実現します。

推奨される関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上がjqueryをクリックして要素クラス名を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート