国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jqueryを使用してCSSファイルの靜的色を動的に変更する
P粉459440991
P粉459440991 2024-03-19 23:24:43
0
1
520

複數(shù)のボタンがあり、bg というクラスがあります。 CSS ファイルで bg クラスのスタイルを設(shè)定しますが、同時に JS ファイルからその色を動的に変更できるようにしたいと考えています。背景は 1 色だけですが、必要に応じてさまざまな色を作成できます。たとえば、カラー コードは API から取得されます (test1 は赤、test2 は黃色など)。思いついたコードは何でも使いたい。たとえば、test2 ページに移動すると、背景が黃色になります。 CSS ファイルにクラス test1 と test2 を作成することでそれを行うこともできますが、數(shù)百ページになる可能性があるため機(jī)能しません。CSS にカラーコードを追加する手間よりも API からカラーコードを使用する方が論理的です。ファイル 。

$('.bg').click(function(){
    $(this).unbind('mouseenter、mouseleave');
  $('.bg').removeClass('active');
  $('.bg.active').css('background',' yellow');
  $(this).addClass('active');
}).hover(
  関數(shù)(){
    $(this).css({
      'ボーダーカラー': '#4000a1',
      '背景': '青'
    });
  }、
  関數(shù)(){
    $(this).css({
        'ボーダーカラー': '#4000a1',
        '背景': '透明'
      });
});
.bg{
  ボーダー: 2px ソリッド #4000a1;
  背景: グレー;
  幅: 200ピクセル;
  高さ: 150ピクセル;
  マージン-ボトム: 20px;
}

.bg.アクティブ{
  背景: 赤;
}

.bg:ホバー{
  背景: 赤;
}
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='bg'></div>
<div class='bg'></div>

同様のことを試しましたが、ホバーは正常に機(jī)能するようですが、クリックすると固定されたままになりますが、そのうちの1つだけをアクティブにしておく必要があります。また、元のファイルではaddClassとremoveClassが別のファイルで行われており、正しくはアクティブなクラスが1つだけですが、スタイルは変わりません。

私の問題を正しく説明できたと思います。

P粉459440991
P粉459440991

全員に返信(1)
P粉684720851

あなたが望んでいる正確な結(jié)果はわかりませんが、一度にアクティブな背景が 1 つだけになるようにコードにいくつかの変更を加えました。私も簡略化しました。 CSS の上にマウスを移動し、JavaScript の上にマウスを移動します...簡単な場合は、CSS ファイルの上にマウスを移動してください。 JavaScript を使用してクリック イベントを処理します。

$('.bg').click(function(){
  $('.bg').css({backgroundColor: ''});
  $(this).css({backgroundColor: $(this).data('color')});
})
.bg{
  ボーダー: 2px ソリッド #4000a1;
  背景: グレー;
  幅: 200ピクセル;
  高さ: 150ピクセル;
  マージン-ボトム: 20px;
}

.bg:ホバー{
  背景: 赤;
}
最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート