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

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

このチュートリアルの動作環境: 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 で赤として定義され、クラス名が黒の場合は背景色も黒になります。

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

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

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

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

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

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