Javascript 如何在 jquery 选项卡的当前活动选项卡上触发（'点击'）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10735423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger('click') on jquery tab's currently active tab
提问by cwhisperer
I have a tabed screen and want to trigger a click on the selected tab once the form is submitted and the return is valid. Here a part of the html:
我有一个选项卡式屏幕，并希望在提交表单并且返回有效后触发对所选选项卡的单击。这是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>
My success command is :
我的成功命令是：
success: function(data, textStatus, XMLHttpRequest) {
$('#tabUL').find('li.current a').trigger('click');
}
This seems not working... Any help is appreciated :) Regards Andrea
这似乎不起作用......感谢任何帮助:) 问候安德里亚
回答by WebChemist
Try using the a[href=""]selector:
尝试使用a[href=""]选择器：
$('#tabUL a[href="#tabProducts"]').trigger('click');
I put together a jsfiddle demoto show it in action, and how to optionally hide the other tabs since often when I'm programmatically forcing tabs its to require missing mandatory information be entered on the initial tab before unlocking the other tabs...
我整理了一个jsfiddle 演示来展示它的实际效果，以及如何选择性地隐藏其他选项卡，因为通常当我以编程方式强制选项卡时，它需要在解锁其他选项卡之前在初始选项卡上输入缺少的强制性信息......
EditHere is the contents of the jsfiddle:
编辑这里是jsfiddle的内容：
HTML
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
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});
}
});
});
回答by Imdad
If you want to reload the tab programmatically then i recommend use Jquery Tab API utility like below: This makes first tab active and then activates second tab, quite simple and also raises the events that would be normally raised when you click directly.
如果您想以编程方式重新加载选项卡，那么我建议使用 Jquery Tab API 实用程序，如下所示：这使第一个选项卡处于活动状态，然后激活第二个选项卡，非常简单，并且还会引发通常在您直接单击时引发的事件。
$( "#myTabs" ).tabs( "option", "active", 0 );
$( "#myTabss" ).tabs( "option", "active", 1 );
Also you can catch tabs active event like below for performing any operations
您还可以捕获如下所示的选项卡活动事件以执行任何操作
$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
// your custom code on tab click
});
回答by optimusprime619
rather than trying to trigger the click event itself (which I believe is not possible to invoke a user event programatically in this context), I suggest that you trigger the function that has to be called on click event, you might want to look into triggerHandler
而不是尝试触发点击事件本身（我认为在这种情况下不可能以编程方式调用用户事件），我建议您触发必须在点击事件上调用的函数，您可能需要查看triggerHandler
