jqueryでタグを非表示にしたり表示したりする方法-フロントエンドQ&A-php.cn

jqueryでタグを非表示にしたり表示したりする方法

青灯夜游

リリース： 2022-04-29 11:52:06

オリジナル

3333 人が閲覧しました

3 実装方法: 1. "$("a").toggle();" を使用します。 2. "$("a").slideToggle();" を使用します。 3. "$ ( "a").fadeToggle();"。この3つの方法でaタグの表示状態を確認し、表示されていれば非表示にし、非表示であれば表示します。

jqueryでタグを非表示にしたり表示したりする方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

#jquery は、次の 3 つの組み込みメソッドを使用して要素を表示または非表示にすることができます

##fadeToggle() メソッド

1. toggle() メソッドを使用します

toggle() メソッドは、選択した要素の Hide() と show() を切り替えます。

このメソッドは、選択した要素の表示ステータスをチェックします。要素が非表示の場合は 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>

ログイン後にコピー

jqueryでタグを非表示にしたり表示したりする方法

2. 選択した要素で slideToggle() メソッド

slideToggle() メソッドを使用します。 slideUp() と slideDown() を切り替えます。

このメソッドは、選択した要素の表示ステータスをチェックします。要素が非表示の場合は 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. fadeToggle() メソッドを使用する

fadeToggle() メソッドは、fadeIn の間にあります。 () をクリックして、fadeOut() メソッドを切り替えます。

要素がフェードアウトしている場合、fadeToggle() はフェードイン効果を使用して要素を表示します。

要素がフェードインしている場合、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 ビデオチュートリアル