获取JQuery UI tabs中被选中的tabs的方法

Posted 2020-10-05 shubin

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中文文档