Sliding Tabs HTML 架構


<!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>
本報導內容或資料,因限人力、時間,非教學會員,不接受任何使用上的教學與指導,敬請見諒。
如果你喜歡這篇辛苦蒐集整理出來的報導資料,歡迎原文轉載註明出處,以示尊重個人智慧財產,謝謝你的合作。
如果你願意於貴站或部落格中介紹本站,歡迎使用複製網頁研習室連結語法,再次感謝你的支持與愛護。
版權所有 - 網頁研習室 - 李文能于 100 年 12 月 30 日整理