jQuery에서 클릭 버튼을 표시하고 숨기는 방법-JS 튜토리얼-php.cn

jQuery에서 클릭 버튼을 표시하고 숨기는 방법

yulia

풀어 주다： 2018-10-29 15:41:37

원래의

17787명이 탐색했습니다.

jQuery는 많은 기능을 간단하고 빠르게 구현할 수 있어 프론트엔드 개발에 널리 사용됩니다. jQuery를 배우는 친구들은 jQuery를 사용하여 클릭하면 표시되고 클릭하면 다시 숨기는 효과를 얻을 수 있습니다(즉, jQuery 이중 -숨기려면 클릭)? 이 기사에서는 jQuery를 사용하여 클릭 표시 및 숨기기 효과를 얻는 방법에 대해 설명합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

다음은 jQuery에서 클릭 표시 및 숨기기를 구현하는 두 가지 방법을 소개합니다. 하나는 전환() 메서드이고 다른 하나는 jquery의 hide() 및 show() 메서드입니다.

참고: jQuery 파일을 삽입하는 것을 잊지 마세요. 그렇지 않으면 효과를 얻을 수 없습니다.

1. jquery

toggle() 메서드의ggle() 메서드는 두 개 이상의 기능을 추가할 수 있으며, 그런 다음 클릭 이벤트를 통해 수행합니다. 전환하려면 클릭하면 지정된 첫 번째 함수가 호출되고, 다시 클릭하면 두 번째 함수가 호출되는 식으로 루프를 호출합니다.

구문: $(selector).toggle(function)

function은 클릭 시 실행되어야 하는 기능을 나타냅니다.

설명 예: "Show and Hide Toggle" 버튼을 처음 클릭하면 콘텐츠가 P 라벨이 숨겨져 있으며 다시 클릭하면 P 태그의 내용이 표시되며 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button type="button">显示与隐藏切换</button>
  <p>我可以显示也可以隐藏</p>
  <p>啦啦啦</p>
 </body>
 <script type="text/javascript">
  $(document).ready(function() {
   $("button").click(function() {
    $("p").toggle();
   });
  });
 </script>
</html>

로그인 후 복사

아래 그림과 같이 첫 번째 그림은 클릭이 없을 때의 효과이고, 두 번째 그림은 첫 번째 클릭이 이루어졌을 때 내용을 숨기는 효과입니다.

jQuery에서 클릭 버튼을 표시하고 숨기는 방법

2. jquery

hide() 메서드의 hide() 및 show() 메서드는 CSS의 display:none 속성과 유사하게 선택한 요소를 숨길 수 있습니다. show() 메소드는 숨겨진 선택된 요소를 표시할 수 있습니다. hide()와 show()의 사용법은 하나가 표시되고 다른 하나가 숨겨진다는 점을 제외하면 동일합니다.

구문: $(selector).hide(speed,easing,callback)

speed는 효과 표시 속도를 나타내며 선택 값입니다(느림, 빠름, 밀리초)
easing은 요소를 서로 다르게 설정하는 데 사용됩니다. 애니메이션의 포인트 Speed는 선택값(스윙, 선형)
콜백은 show() 메서드 실행 후 실행해야 하는 함수를 나타내며, 선택값이기도 합니다

인스턴스 설명: "Hide " 버튼을 클릭하면 P 라벨 콘텐츠가 숨겨지고, "표시" 버튼을 클릭하면 P 태그의 콘텐츠가 표시됩니다. 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <p id="p1">点击隐藏按钮，文字消失<br>点击显示按钮，文字重现</p>
  <button id="hide" type="button">隐藏</button>
  <button id="show" type="button">显示</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function() { 
   $("#hide").click(function() { 
    $("#p1").hide(); 
   }); 
   $("#show").click(function() { 
    $("#p1").show(); 
   });
  });
 </script>
</html>

로그인 후 복사

효과는 그림과 같습니다.

jQuery에서 클릭 버튼을 표시하고 숨기는 방법

위의 모든 사람들은 클릭 표시 및 숨기기를 구현하는 jQuery의 두 가지 방법을 소개했습니다. 하나는 클릭하여 표시한 다음 클릭하여 버튼을 숨기는 효과를 얻을 수 있는 두 번째 방법입니다. 두 개의 버튼을 통해 콘텐츠를 표시하고 숨기는 jquery의 hide() 및 show() 메서드. 직장에서 어떤 방법을 선택할지는 업무 요구 사항과 개인 습관에 따라 다릅니다. 이전에 접해 본 적이 없는 친구는 스스로 연습해야 합니다. 이 기사가 배우기를 좋아하는 여러분에게 도움이 되기를 바랍니다!

위 내용은 jQuery에서 클릭 버튼을 표시하고 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!