為您的佈景主題增添「頁籤功能」
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ZH-TW">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
<style type="text/css">
li {display: inline;}
</style>
<script type="text/javascript">
function boxTab(myTab, ItemCheck) {
tabObj = document.getElementById(myTab).style;
var myItem1 = document.getElementById("tab1");
var myItem2 = document.getElementById("tab2");
var myItem3 = document.getElementById("tab3");
var selected = ItemCheck;
if(selected === "Item1") {
tabObj.display = "";
myItem2.style.display = "none";
myItem3.style.display = "none";
} else if(selected === "Item2") {
tabObj.display = "";
myItem1.style.display = "none";
myItem3.style.display = "none";
} else if(selected === "Item3") {
tabObj.display = "";
myItem1.style.display = "none";
myItem2.style.display = "none";
}
}
</script>
<title></title>
</head>
<body>
<ul>
<li><a href="javascript:void(null)" id="item1" onclick="boxTab('tab1', 'Item1');">頁籤項目一</a></li>
<li><a href="javascript:void(null)" id="item2" onclick="boxTab('tab2', 'Item2');">頁籤項目二</a></li>
<li><a href="javascript:void(null)" id="item3" onclick="boxTab('tab3', 'Item3');">頁籤項目三</a></li>
</ul>
<div id="tab1">tab1 的內容</div>
<div id="tab2" style="display: none;">tab2 的內容</div>
<div id="tab3" style="display: none;">tab3 的內容</div>
</body>
</html>
頁數： 1 2
