JQuery標簽事件處理實例

如果你正在使用JQuery tabs而且想從基本的功能擴展到自定義的功能，這是你最好知道如何處理JQuery的點擊事件。

在這篇文章中：

　　1.回顧如何添加當tab被點擊時的事件處理

背景：

　　需要了解的是，JQuery在不斷修正的，很多有用的信息只針對於某一特定的老版本，JQuery已經不在支持。

　　在這種情況下，JQuery-ui對標簽頁的事件監聽的支持從1.9.x的show命令切換到JQuery-UI 1.10.x的activate命令。

處理一個Tab的點擊事件在JQuery-UI 1.10.x和JQuery UI 1.9.x

　　這是一個用於JQuery-UI 1.10.x的激活tab響應的代碼片段在這個頁面，將會執行你自己寫的代碼，當第二個tab被點擊。

<script type="text/javascript" >
 $(function () {
 $(‘#tabs‘).tabs({
 activate: function (event, ui) {
 var $activeTab = $(‘#tabs‘).tabs(‘option‘, ‘active‘);
 if ($activeTab == 1) {
 // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
 }
 }
 });
});
 </script>

這是早期版本的JQuery-UI使用show命令。

<script type="text/javascript" >
 $(function () {
 $(‘#tabs‘).tabs({
 show: function (event, ui) {
 var $activeTab = $(‘#tabs‘).tabs(‘option‘, ‘active‘);
 if ($activeTab == 1) {
 // HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
 }
 }
 });
});
 </script>

從上面的代碼可以看出，JQuery的編寫者可以僅僅將show改變成activate由於語法的原因。作為一個開發者，需要記住，如果一部分的JQuery的代碼不起作用，最好在猜測是否有bug前，檢查一下語言棄用幫助。

參考資料：

1.JQuery – Example of Tabs Event Handling

2. JQuery中文文檔

獲取JQuery UI tabs中被選中的tabs的方法