ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery ボタンのクリックで CSS 状態を切り替える方法

jQuery ボタンのクリックで CSS 状態を切り替える方法

DDD
リリース: 2024-11-12 05:02:01
オリジナル
255 人が閲覧しました

How to Toggle CSS States with a jQuery Button Click?

jQuery ボタン クリックで CSS 状態を切り替える

インタラクティブな Web アプリケーションを構築する場合、多くの場合、ユーザー入力に基づいてさまざまな CSS 状態を切り替えることが必要になります。 。このシナリオでは、ボタンのクリック時にメニューを表示し、その外観を変更したいとします。

解決策:

提供されたコードは、toggle メソッドを使用して、 ID「user_button」のボタンをクリックすると、ID「user_options」のメニューが表示されます。ただし、CSS プロパティを切り替える機能はありません。

これに対処するには、コールバック関数で toggle メソッドを使用するか、jQuery の addClass メソッドとremoveClass メソッドを利用します。

Usingコールバック関数 (jQuery <) に切り替えます。 1.9):

$('#user_button').toggle(function() {
  $("#user_button").css({borderBottomLeftRadius: "0px"});
}, function() {
  $("#user_button").css({borderBottomLeftRadius: "5px"});
});
ログイン後にコピー

このコードは 2 つのコールバック関数を定義します。1 つはボタンが最初にクリックされたとき (スライド効果) で、もう 1 つは再度クリックされたとき (元の状態に戻る) です。

または、クラス:

$('#user_button').toggle(function() {
  $("#user_button").addClass("active");
}, function() {
  $("#user_button").removeClass("active");
});
ログイン後にコピー

ここでは、CSS プロパティを直接変更する代わりに、CSS クラス (この場合は「アクティブ」) を追加および削除して、目的のスタイルを切り替えます。この方法はより柔軟であり、ハードコーディングされた CSS 値の使用を回避します。

これらのソリューションのいずれかを実装すると、ボタンに応じてメニュー要素の表示と CSS の外観を切り替えるという目的の機能を実現できます。クリックします。

以上がjQuery ボタンのクリックで CSS 状態を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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