<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>
<title>製作 sliding tabs 滑動頁籤功能</title>
這裡要插入 CSS Go 及兩個 JavasCript MooTools 插件程式 Go
</head>
<body>
<div id="wrapper">
<div id="heading">
<img src="left.png" alt="" id="previous" width="40" height="40"/>
<ul id="buttons">
<li>選項一</li>
<li>選項二</li>
<li>選項三</li>
<li>選項四</li>
<li>選項五</li>
</ul>
<img src="right.png" alt="" id="next" width="40" height="40"/>
</div>
<div id="panes">
<div id="content">
<div class="pane" id="item1">
<p>
這是選項一,按此前往<a href="#" onclick="myTabs.changeTo('item5')">選項五</a>。
</p>
</div>
<div class="pane" id="item2">
這是選項二,按此前往<a href="#" onclick="myTabs.changeTo('item3')">選項三</a>。
</p>
</div>
<div class="pane" id="item3">
這是選項三,按此前往<a href="#" onclick="myTabs.changeTo('item4')">選項四</a>。
</p>
</div>
<div class="pane" id="item4">
這是選項四,按此前往<a href="#" onclick="myTabs.changeTo('item2')">選項二</a>。
</p>
</div>
<div class="pane" id="item5">
這是選項五,按此前往<a href="#" onclick="myTabs.changeTo('item1')">選項一</a>。
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" charset="big5">
這裡要插入一段 JavasCript MooTools 程式 Go
</script>
</body>
</html>
|