Question

我有一个标签屏幕, 想要在表格提交且返回有效后触发选中标签的点击。这里的 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 );
}

这似乎行不通...任何帮助都是感激不尽的:

Answer 1

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

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

I put together a jsfiddle demo to 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...

Edit Here is the contents of the 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

jj 查询

$(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});
    }
  });
});

Answer 2

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.

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

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

您也可以在下面的标签活动中抓取活动活动事件,如执行任何操作时的标签活动。

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

Answer 3

而不是试图触发点击事件本身(我认为在此情况下无法以程序程序方式援引用户事件),我建议您触发点击事件时必须调用的功能,您可能想查看 http://api.jquery.com/trigerHandler/"rel="nown">TriggerHandler

友情链接