jqueryクリック追加削除スタイル

jquery は、効率的で一般的に使用される JavaScript ライブラリです。主に、HTML ドキュメントの走査と操作、イベント処理、アニメーション効果の実装を簡素化するために使用されます。フロントエンド開発者は、高度にインタラクティブな Web ページを開発するためによく使用します。 。 jQueryでスタイルを追加したり削除したりするのもよくある作業ですが、ここではjQueryを使ってワンクリックでスタイルを追加・削除する方法を紹介します。

まず、HTML と CSS を使用して簡単なスタイル リストを作成する必要があります。 HTML では、ul タグと li タグを使用して、単純な順序なしリストを作成できます。コードは次のとおりです。

<ul class="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

次に、CSS でリスト項目のスタイルを指定できるため、スタイルを追加および削除するときに次のようになります。使用。コードは次のとおりです。

.myList li{
  padding:10px;
  border:1px solid black;
  cursor:pointer;
}
.myList li.selected{
  background-color:gray;
  color:white;
}

これで、JavaScript ファイルで、jQuery を使用してスタイルを追加および削除できます。まず、jQuery セレクターを使用してすべてのリスト項目を検索し、click() 関数を使用してそれらにクリック イベントを追加する必要があります。コードは次のとおりです:

$(document).ready(function(){
  $('.myList li').click(function(){
    //代码将在此处添加
  });
});

クリック イベントでは、 toggleClass() 関数は、CSS ですでに定義されているスタイルである .selected クラスを追加または削除します。コードは次のとおりです。

$(document).ready(function(){
  $('.myList li').click(function(){
    $(this).toggleClass('selected');
  });
});

これで、リスト項目をクリックすると、選択状態のスタイルが切り替わります。すでに選択されている場合は選択を解除し、その逆も同様です。この例はオンラインで採用できます: https://codepen.io/alenaofficial/pen/zYGOYap

スタイルの追加と削除は非常に簡単で、jQuery を使用すると動的なスタイルの変更を簡単に実装してユーザー エクスペリエンスを向上させることができます。

以上がjqueryクリック追加削除スタイルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。