今天學習了JS和html結合的，點擊來切換到不同內容顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>信2005-2 趙磊</title>
<script type="text/jscript">
//顯示tab（tabHeadId：tab頭中當前的超鏈接；tabContentId要顯示的層ID）
function showTab(tabHeadId,tabContentId)
{
//tab層
var tabDiv = document.getElementById("tabDiv");
//將tab層中所有的內容層設為不可見
//遍歷tab層下的所有子節點
var taContents = tabDiv.childNodes;
for(i=0; i<taContents.length; i++)
{
//將所有內容層都設為不可見
if(taContents[i].id!=null && taContents[i].id != 'tabsHead')
{
taContents[i].style.display = 'none';
}
}
//將要顯示的層設為可見
document.getElementById(tabContentId).style.display = 'block';
//遍歷tab頭中所有的超鏈接
var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
for(i=0; i<tabHeads.length; i++)
{
//將超鏈接的樣式設為未選的tab頭樣式
tabHeads[i].className='tabs';
}
//將當前超鏈接的樣式設為已選tab頭樣式
document.getElementById(tabHeadId).className='curtab';
document.getElementById(tabHeadId).blur();
}
</script>
</head>
<style>
.tabDiv{
border:1px solid #F00;
}
</style>
<body>
<h1 align = "center" >趙磊的個人主頁</h1>
<div class = "tabDiv" id = "tabDiv">
<div id="tabsHead">
<a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">基本資料</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">獲獎記錄</a>
</div>
<div class = "tabContent1" id = "tabContent1">
<p>1</p>
</div>
<div class = "tabContent2" id = "tabContent2" style = "display:none">
<p>2</p>
</div>
</div>
</body>
</html>