jQueryでdivを非表示にする方法-フロントエンドQ&A-php.cn

jQueryでdivを非表示にする方法

青灯夜游

リリース： 2022-02-28 15:01:46

オリジナル

8470 人が閲覧しました

div を非表示にする Jquery メソッド: 1. 「$("div").hide();」ステートメントを使用して非表示にします; 2. 「$("div").toggle(); を使用します。 " ステートメント Hide; 3. 非表示にするには、"$("div").css("display","none");" ステートメントを使用します。

jQueryでdivを非表示にする方法

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

div を非表示にする jquery メソッド

方法 1: Hide() メソッドを使用する

hide () メソッドを使用すると、選択した要素を非表示にすることができます。

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("button").click(function(){
			  $("div").hide();
			  });
			});
		</script>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<div style="font-size:120%;color:red">这是一个div元素。</div>
		<p>这是另一个段落。</p>
		<button>删除div元素</button>
	</body>
</html>

ログイン後にコピー

jQueryでdivを非表示にする方法

方法 2: toggle() メソッド

toggle() メソッドを使用して、要素の表示状態を切り替えます。

選択した要素が表示されている場合は、これらの要素を非表示にします。選択した要素が非表示になっている場合は、これらの要素を表示します。

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("button").click(function(){
			  $("div").toggle();
			  });
			});
		</script>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<div style="font-size:120%;color:red">这是一个div元素。</div>
		<p>这是另一个段落。</p>
		<button>隐藏或显示div元素</button>
	</body>
</html>

ログイン後にコピー

jQueryでdivを非表示にする方法

方法 3: CSS() メソッドを使用して、表示属性を要素に設定します

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("button").click(function(){
			  $("div").css("display","none");//隐藏div
			  });
			});
		</script>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<div style="font-size:120%;color:red">这是一个div元素。</div>
		<p>这是另一个段落。</p>
		<button>隐藏div元素</button>
	</body>
</html>

ログイン後にコピー

jQueryでdivを非表示にする方法