jQuery id Tab

jQuery  

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/

arrow
arrow
    文章標籤
    jQuery
    全站熱搜

    jon6773 發表在 痞客邦 留言(0) 人氣()