jquery - 如何通过代码更改 jquery ui 选项卡？

Question

我有一个用于 js 函数的 html。并使用 jquery ui -tabs。

<ul>
 <li><a href="#tabs-1">MenueTree</a></li>
 <li id="liConfigCustomer"><a href="#tabs-2">ConfigCustomer</a></li>

</ul>
 <div id="tabs-1"><input type='button' value='test' id ='betTest'></div>
 <div id="tabs-2"><input type='button' value='test' id ='betTest2'></div>

有一个js函数，当我点击按钮'betTest'做某事并自动转到tabs-2时，如何编写函数？

Answer 1

您可以为单击按钮编写一个单击处理程序，您可以使用活动 选项设置器更改选项卡元素的活动选项卡

$('#betTest').click(function(){
    $( "#tabs" ).tabs( "option", "active", 1 );
})

演示：小提琴

Answer 2

在不硬编码选项卡索引的情况下这样做

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
  </ul>
  <div id="tabs-1">
      <input type='button' value='test' id ='betTest' />
  </div>
  <div id="tabs-2">
      <input type='button' value='test22' id ='betTest2' />
  </div>
  <div id="tabs-3">

  </div>
</div>

然后在你的 JS 上

$(function() {
    $("#tabs").tabs();
    $("#betTest").click(function()
           {
             var tabToSelect = $('#tabs-2');
             tabIndexToSelect = tabToSelect.index() -1;
             $("#tabs").tabs({ active: tabIndexToSelect });
           }
        );
});

提琴手在这里

http://jsfiddle.net/rsmacaalay/CB2wJ/