jQuery showとhideで要素を表示と非表示する方法
jQuery show 要素を表示する方法
showの英語の意味は見せるです。
サンプル
$(“セレクタ”).show()
showメソッドは要素を表示にするメソッドです。
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.red”).css(“display”,”none”)
$(“.red”).show()
});
</script>
<title>
</title>
</head>
<body>
<h3 class=”red”>red</h3>
<h3 class=”Green”>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</body>
</html>
実行結果は
red
Green
yellow
Blue
です。
$(“.red”).css(“display”,”none”)でcssで要素を非表示状態にしてから
showメソッドで表示にしてます。
jQuery hide 要素を表示する方法
hideの英語の意味は隠す、隠れる、見えないようにするです。
hideメソッドは要素を表示するメソッドです。
サンプル
$(“セレクタ”).hide()
サンプル
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(document).ready(function(){
$(“.red”).hide()
});
</script>
<title>
</title>
</head>
<body>
<h3 class=”red”>red</h3>
<h3 class=”Green”>Green</h3>
<h3>yellow</h3>
<h3>Blue</h3>
</body>
</html>
実行結果は
Green
yellow
Blue
です。
redクラスが非表示になってますね。
