Question

我有jQueryUI选项卡，在特定选项卡上，我定义了一个click函数（ajax调用正常工作）：

$("a[href='#tabs-1ua']").click(function (event, ui)
{

     //ajax call

});

现在我要做的就是不仅可以容纳点击，而且可以容纳此选项卡上的任何类型的焦点，例如使用键盘箭头键导航到它。我尝试activate代替click，但我收到了错误。如何在特定的jQueryUI选项卡上捕获所有类型的焦点？

谢谢。

Answer 1

您应该在激活选项卡时设置“tabsactivate”侦听器。请查看以下代码。

// tabs是UL的id，其中包含了所有选项卡。请根据您的代码进行更换。

$('#tabs').tabs({
    activate: function(event ,ui){  
        if(ui.newTab.attr('href')=='#tabs-1ua'){
            //make ajax call
        }
});

Answer 2

尝试

$("a[href='#tabs-1ua']").on('click hover', function () {
// Do something for both
});

Answer 3

输入元素（focus()，<input>，<textarea>）而不是<select>元素默认接受

<a>。首先尝试向选项卡添加选项卡索引：

$(document).ready(function () {

    $("a[href='#tabs-1ua']").attr("tabindex", "-1").focus(function 
    (event, ui) {
        // JS goes here
    });

});

Answer 4

您需要使用focus事件进行键移动，并且还可以将其用于鼠标点击。 focus事件和相关事件的行为是众所周知的，特别是在框架和插件中如何实现它们。虽然我无法说出原因，focus元素上的a会在鼠标单击时触发，而当您导航到focus元素时，li上的$("#myTabs").tabs(); $('#myTabs li, #myTabs a').on('focus', function(e, ui){ //do whatever });会触发带键的元素。（经过Chrome测试。）所以：

mc.loading

Demo

Answer 5

我按照以下方式开展工作：

我使用class属性而不是id初始化了我的应用程序中的选项卡，并在其中指定了activate选项。在那里，我使用$(".tabui .ui-tabs-panel:visible").attr("id");得到了当前活动标签的ID，其中tabui是该类的名称。代码如下。

$('.tabui').tabs({

    activate: function (event, ui)
    {

       //do something 1

        var currentTab = $(".tabui .ui-tabs-panel:visible").attr("id");

        console.log (currentTab);

        if(currentTab ===  "#tabs-1ua")
        {
             //do something 2
        }


    }
});

感谢所有回复试图帮助我的人。

捕获焦点在特定的jQueryUI选项卡上

5 个答案: