AJAXのお勉強

prototype.js 表示・非表示(show/hide)＠AJAX

オブジェクトの表示・非表示処理を行います。

$でオブジェクトを指定して、show/hideにより、
表示・非表示処理が行えます。

また、Elementオブジェクトのshow/hideにより、
表示・非表示処理も行えます。


<html>
<head>
<title>prototype.js show/hide</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--

function showDiv() {
    $("div1").show();
}

function hideDiv() {
    $("div1").hide();
}

function showDiv2() {
    Element.show("div2");
}

function hideDiv2() {
    Element.hide("div2");
}

// -->
</script>
</head>
<body>
<input type="button" value="表示" onclick="showDiv()">
<input type="button" value="非表示" onclick="hideDiv()">

<div id="div1">
①表示・非表示されます。
</div>

<BR>
<input type="button" value="表示２" onclick="showDiv2()">
<input type="button" value="非表示２" onclick="hideDiv2()">

<div id="div2">
②表示・非表示されます。
</div>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.