토글 버튼: 시맨틱 HTML 또는 사용자 정의 jQuery 스타일링 - 어느 것이 가장 좋나요?

토글 버튼 만들기: 의미 있는 옵션과 세련된 옵션

토글 버튼을 사용하면 두 가지 상태를 번갈아 사용할 수 있습니다. HTML에는 기본적으로 체크박스 입력이 포함되어 있지만 원하는 시각적 요구 사항을 항상 충족하는 것은 아닙니다.

의미론적 접근 방식: 체크박스 스타일링

권장되는 의미론적 접근 방식에는 체크박스와 스타일 지정이 포함됩니다. 체크된 상태에 따라 다르게 표시됩니다. 그러나 체크박스의 스타일을 효과적으로 지정하는 것은 어려울 수 있습니다.

대안: jQuery 및 CSS

보다 맞춤화된 솔루션을 위해 jQuery 및 CSS 사용을 고려해 보세요.

1. 토글 이벤트 할당:

   • 일반적으로 .click()을 사용하여 버튼에 jQuery 이벤트 핸들러를 추가합니다.

2. CSS 클래스 전환:

   • 버튼의 모양(예: "아래")을 변경하는 CSS 클래스를 추가 및 제거하려면 .toggleClass()를 사용하세요.

3. CSS 스타일링:

   • 각 버튼 상태에 대해 서로 다른 테두리 및 배경 스타일을 사용하여 CSS 클래스를 만듭니다(예: " 위쪽" 및 "아래쪽").

예:

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

<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>

<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>

위 내용은 토글 버튼: 시맨틱 HTML 또는 사용자 정의 jQuery 스타일링 - 어느 것이 가장 좋나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!