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 중국어 웹사이트의 기타 관련 기사를 참조하세요!