如何在 jquery 选项卡的当前活动选项卡上触发（“单击”）答案

【问题标题】：How to trigger('click') on jquery tab's currently active tab如何在 jquery 选项卡的当前活动选项卡上触发（“单击”）
【发布时间】：2012-05-24 10:12:54
【问题描述】：

我有一个选项卡式屏幕，并希望在提交表单并且返回有效后触发对所选选项卡的点击。这是html的一部分：

<ul id="tabUL" class="tabs js-tabs same-height">
    <li class="current">
        <a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a>
    </li>
</ul>

我的成功命令是：

success: function(data, textStatus, XMLHttpRequest) {
    $('#tabUL').find('li.current a').trigger('click');
}

这似乎不起作用...任何帮助表示赞赏 :) 问候安德里亚

【问题讨论】：

如果标签已被选中，您希望点击它做什么？
试试 $('li.current').parent().trigger('click');
你的js控制台报错了吗？
你的成功函数甚至被击中了吗？您是否尝试过在点击触发器上方发出警报？
是的，成功功能被击中。我试过 $('#tabUL').find('li.current a').css('background-color', 'red');整个里都变成了红色。没有报告错误...

标签： javascript jquery events jquery-ui-tabs eventtrigger

【解决方案1】：

尝试使用a[href=""] 选择器：

$('#tabUL a[href="#tabProducts"]').trigger('click');

我整理了一个jsfiddle demo 来展示它，以及如何选择性地隐藏其他选项卡，因为我经常以编程方式强制选项卡需要在解锁其他选项卡之前在初始选项卡上输入缺少的强制性信息......

编辑这是jsfiddle的内容：

HTML

<div id="tabs">
  <ul>
    <li><a href="#tab0">Address</a></li>
    <li><a href="#tab1">Shipping</a></li>
    <li><a href="#tab2">Parts</a></li>
    <li><a href="#tab3">Datasheets</a></li>
  </ul>
  <div id="tab0">
        <h1>This is the first tab (0)</h1>
  </div>
  <div id="tab1">
     <h1>This is the second tab (1)</h1>
  </div>
  <div id="tab2">
     <h1>This is the third tab (2)</h1>
  </div>
  <div id="tab3">
     <h1>This is the fourth tab (3)</h1>
  </div>
</div>
<br/>
Select the
<select id="tabSelect">
  <option value="0">1st</option>
  <option value="1">2nd</option>
  <option value="2">3rd</option>
  <option value="3">4th</option>
</select>Tab and
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others

jQuery

$(document).ready(function () {
  $('#tabs').tabs();
  $('#tabSelect').change(function () {
        //pass empty array to unlock any locked tabs
    $('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click');

    if ($('#tabHide').prop('checked')) {
      //hide will be an array like [0,2,3]
      var hide = Array();
      $('#tabs li').not('.ui-tabs-active').each(function () {
        hide.push($(this).index());
      });      
      $('#tabs').tabs({disabled: hide});
    }
  });
});

【讨论】：

【解决方案2】：

如果您想以编程方式重新加载选项卡，那么我建议使用 Jquery Tab API 实用程序，如下所示：这使第一个选项卡处于活动状态，然后激活第二个选项卡，非常简单，并且还会引发通常在您直接单击时引发的事件。

$( "#myTabs" ).tabs( "option", "active", 0 );

$( "#myTabss" ).tabs( "option", "active", 1 );

您还可以捕获如下所示的选项卡活动事件以执行任何操作

$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
    // your custom code on tab click
});

【讨论】：

我没有更好的建议

【解决方案3】：

而不是试图触发点击事件本身（我认为在这种情况下不可能以编程方式调用用户事件），我建议您触发必须在点击事件上调用的函数，您可能想要查看triggerHandler

【讨论】：