jQuery id Tab
1. 先下載jquery.idTabs.min.js
http://www.sunsean.com/idTabs/jquery.idTabs.min.js
2. 放在head裡
<head>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
</head>
3. 設定點選連結
class="selected" <!-- 為選取的內容(勿改名) -->
id="freedom" class="idTabs" <!-- 勿改名 -->
href="#t1" <!-- 可自行更改名稱 -->
<ul id="freedom" class="idTabs">
<li>選單</li>
<li><a class="selected" href="#t1">連結1</a></li>
<li><a href="#t2">連結2</a></li>
<li><a href="#t3">連結3</a></li>
<li><a href="#t4">連結4</a></li>
</ul>
4. 設定點選連結時要出現的內容
可在同div內顯示內容
<div>
<p id="t1">點選連結1出現的內容</p>
<p id="t2">點選連結2出現的內容</p>
</div>
也可顯示圖片
<img id="t3" src="images/test.jpg" alt="點選連結3會出現的圖片" />
也可顯示span
<span id="t4">點選連結4會出現的內容</span>
簡單說只要設定id，就能讓不同類型內容顯示。
參考資料：
http://www.sunsean.com/idTabs/
文章標籤
全站熱搜
留言列表
科技 (16)
