CSS와 JavaScript를 사용하여 눌린 토글 버튼을 만드는 방법은 무엇입니까?

대화형 토글 버튼 스타일 지정

클릭 시 눌려진 상태를 유지하는 토글 버튼을 만드는 것은 순수 CSS로는 직접 달성할 수 없습니다. 이 효과를 얻으려면 HTML, CSS 및 JavaScript의 조합이 필요합니다.

HTML 및 CSS 사용:

체크박스를 기본 의미 요소로 사용하는 것을 고려하세요. 선택 여부에 따라 스타일을 다르게 지정하세요. 그러나 이 접근 방식에는 HTML 및 CSS가 더 복잡해질 수 있습니다.

jQuery 사용:

더 나은 해결책은 jQuery를 사용하는 것입니다. 다음은 두 가지 상태 사이에서 버튼 스타일을 전환하는 간단한 기능입니다.

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

관련 CSS:

토글 버튼의 ​​스타일을 지정하려면 다음 CSS를 사용하세요.

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border: solid 2px;
  padding: 5px;
}

a.down {
  background: #bbb;
  border-color: #777 #777 #eaeaea #eaeaea;
}</code>

HTML:

마지막으로 jQuery 라이브러리를 포함하고 다음 HTML 스니펫을 사용하여 버튼을 구현합니다.

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a></code>

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