Sass와 jQuery를 사용하여 토글 버튼을 만드는 방법은 무엇입니까?

Sass와 jQuery를 사용하여 토글 버튼 만들기

클릭 시 상태를 유지하는 토글 버튼을 만들고 싶다면 CSS만으로는 더 뛰어들 필요가 있습니다.

의미론적 접근

선호되는 접근 방식은 체크박스를 사용하여 체크된 상태에 따라 스타일을 지정하는 것입니다. 그러나 여기에는 추가 요소와 복잡성이 포함될 수 있습니다.

jQuery 솔루션

보다 효율적인 방법은 다양한 버튼 상태에 대해 jQuery와 두 개의 배경 이미지를 사용하는 것입니다.

HTML:

<code class="html"><a id="button" title="button">Press Me</a></code>

JS:

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

CSS:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>

이 jQuery 함수는 클릭 시 버튼의 "down" 클래스를 토글합니다. CSS 클래스는 각 상태에 대한 배경 이미지와 테두리 스타일을 정의합니다.

위 내용은 Sass와 jQuery를 사용하여 토글 버튼을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!