jquery 클릭 추가 삭제 스타일

jquery는 효율적이고 일반적으로 사용되는 JavaScript 라이브러리로, 주로 HTML 문서의 탐색 및 작업, 이벤트 처리 및 애니메이션 효과 구현을 단순화하는 데 사용됩니다. 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에 정의된 스타일입니다. 코드는 다음과 같습니다.

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

이제 목록 항목을 클릭하면 선택한 상태의 스타일이 전환됩니다. 이미 선택되어 있으면 선택을 취소하고 그 반대의 경우도 마찬가지입니다. 이 예는 온라인에서 채택할 수 있습니다: https://codepen.io/alenaofficial/pen/zYGOYap

스타일을 추가하고 삭제하는 것은 매우 간단하며 jQuery를 사용하면 동적 스타일 변경을 쉽게 구현하여 사용자 경험을 향상시킬 수 있습니다.

위 내용은 jquery 클릭 추가 삭제 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!