div點擊不同的按鈕顯示不同的內容：
方法一：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="div1" style="float:left;width:40px;border:solid
1px;cursor:pointer;background-color:red" οnclick="viewme()">
a
</div>
<div id="div2" style="float:left;width:40px;border:solid 1px;cursor:pointer"
οnclick="viewme()">
b
</div>
<div id="d1"style="clear:both"></div>
<div id="div3" style="float:left;display:block;width:240px;height:480px;border:solid
1px">
<p1>aaaaaaaaaaaaaaaaaaaaaa</p1>
</div>
<div id="div4" style="float:left;display:none;width:240px;height:480px;border:solid
1px">
<p1>bbbbbbbbbbbbbbbbbbbbbbbbb</p1>
</div>
<script type="text/javascript">
var temp=1;
function viewme(id)
{
document.getElementById("div2").style.backgroundColor="gray";
document.getElementById("div1").style.backgroundColor="white";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "block";
}
function hideme()
{
document.getElementById("div2").style.backgroundColor="white";
document.getElementById("div1").style.backgroundColor="red";
document.getElementById("div3").style.display="block";
document.getElementById("div4").style.display="none";
}
</script>
</BODY>
</HTML>
方法二：
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="div1" style="float:left;width:40px;border:solid
1px;cursor:pointer;background-color:red" οnclick="viewme(1)">
a
</div>
<div id="div2" style="float:left;width:40px;border:solid 1px;cursor:pointer"
οnclick="viewme(2)">
b
</div>
<div id="div3" style="float:left;width:40px;border:solid 1px;cursor:pointer"
οnclick="viewme(3)">
c
</div>
<div id="d1"style="clear:both"></div>
<div id="Div1" style="float:left;display:block;width:240px;height:480px;border:solid
1px">
<p1>aaaaaaaaaaaaaaaaaaaaaa</p1>
</div>
<div id="Div2" style="float:left;display:none;width:240px;height:480px;border:solid
1px">
<p1>bbbbbbbbbbbbbbbbbbbbbbbbb</p1>
</div>
<div id="Div3" style="float:left;display:none;width:240px;height:480px;border:solid
1px">
<p1>cccccccccccccccccc</p1>
</div>
<script type="text/javascript">
var temp=1;
function viewme(id)
{
document.getElementById("div"+id).style.backgroundColor="gray";
document.getElementById("div"+temp).style.backgroundColor="white";
document.getElementById("Div"+temp).style.display = "none";
document.getElementById("Div"+id).style.display = "block";
temp=id;
}
</script>
</BODY>
</HTML>
