HTML과 CSS로 토글 버튼을 만드는 방법은 무엇입니까?

HTML 및 CSS를 사용하여 토글 버튼 만들기

HTML과 CSS를 사용하여 잠금 동작을 사용하는 토글 버튼을 만드는 것이 목표입니다. 한 번 클릭하면 푸시된 상태이고 다시 클릭하면 해제됩니다. 이를 달성하려면 다음 접근 방식을 고려할 수 있습니다.

jQuery 사용

권장되는 접근 방식은 JavaScript 라이브러리인 jQuery를 사용하여 원하는 동작을 달성하는 것입니다. jQuery는 요소의 클래스에 대한 두 가지 상태 사이를 전환할 수 있도록 하는ggleClass() 메서드를 제공합니다. 이를 통해 "푸시됨" 및 "해제됨" 상태에 대해 서로 다른 스타일을 갖는 두 클래스가 있는 토글 버튼을 생성할 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#button {
    /* Styling for released state */
}
#button.down {
    /* Styling for pushed state */
}
</style>
<script>
$(document).ready(function() {
    $('#button').click(function() {
        $(this).toggleClass("down");
    });
});
</script>

이 예에서 "버튼" 요소는 " 아래로"를 클릭하면 모양이 "밀린" 상태로 변경됩니다. 다시 클릭하면 "down" 클래스가 제거되어 "released" 상태로 돌아갑니다.

CSS 및 추가 요소 사용

만큼 간단하지는 않지만 jQuery를 사용하면 CSS 및 추가 HTML 요소를 사용하여 토글 버튼 동작을 모방할 수 있습니다. 이 기술에는 체크박스를 사용하고 버튼처럼 보이도록 스타일을 지정하는 작업이 포함됩니다. 그러나 원활한 모양을 얻으려면 상태 변경을 처리하기 위해 추가 범위, div 및 JavaScript를 사용해야 합니다.

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