Jquery에서 태그를 숨기고 표시하는 방법-프런트엔드 Q&A-php.cn

Jquery에서 태그를 숨기고 표시하는 방법

青灯夜游

풀어 주다： 2022-04-29 11:52:06

원래의

3350명이 탐색했습니다.

3가지 구현 방법: 1. "$("a").toggle();" 사용 2. "$("a").slideToggle();" 사용 3. "$("a") ).fadeToggle();". 이 세 가지 방법은 a 태그의 표시 상태를 확인합니다. 표시되면 숨겨집니다.

Jquery에서 태그를 숨기고 표시하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 1.10.2, Dell G3 컴퓨터.

jquery는 요소를 숨기고 표시하기 위해 다음 3가지 내장 메소드를 사용할 수 있습니다.

이 방법은 선택한 요소의 표시 상태를 확인합니다. 요소가 숨겨져 있으면 show()를 실행하고, 요소가 표시되면 hide()를 실행합니다. 그러면 숨김 상태와 표시된 상태 사이를 전환하는 효과가 생성됩니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("a").toggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

로그인 후 복사

2. 선택한 요소에서 SlideUp()과 SlideDown() 사이를 전환하려면 SlideToggle() 메서드

slideToggle() 메서드를 사용하세요.

이 방법은 선택한 요소의 표시 상태를 확인합니다. 요소가 숨겨져 있으면 SlideDown()이 실행되고, 요소가 표시되면 SlideUp()이 실행됩니다. 이는 숨김 상태와 표시된 상태 사이를 전환하는 효과를 만듭니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("a").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

로그인 후 복사

Jquery에서 태그를 숨기고 표시하는 방법

3. fadeIn()과 fadeOut() 메서드 사이를 전환하려면 fadeToggle() 메서드

fadeToggle() 메서드를 사용하세요.

요소가 페이드 아웃되면 fadeToggle()은 페이드 인 효과를 사용하여 해당 요소를 표시합니다.

Jquery에서 태그를 숨기고 표시하는 방법 요소가 페이드 인되면 fadeToggle()은 페이드 아웃 효과를 사용하여 해당 요소를 표시합니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("a").fadeToggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

로그인 후 복사

【추천 학습:
jQuery 동영상 튜토리얼
,
웹 프론트엔드 동영상
】

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