jQueryオブジェクト０２

jQuery 授業



要素の表示／非表示を変更する - show/hide



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の表示／非表示を変更する - show/hide</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body {
background-color: #F93;
}
	
#div1 {
width: 300px;
height: 200px;
}

#div2 {		
width: 300px;
height: 200px;
}
</style>

</head>
<body>

<div id="div1">最初は非表示になっているdiv</div>
<div id="div2">最初は表示されているdiv</div>

<script>
$(function() {
$('#div1').show();
$('#div2').hide();
})
</script>

</body>
</html>

ブラウザで表示【 Chrome 】