How to change the jquery ui tabs by code?

Question

i got a html for js function .and use 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>

there got a js func, when i click button 'betTest' do something and auto turn to tabs-2, how to write the function?

Answer 1

You can write a click handler for the button on click of which you can change the active tab of the tab element using the active option setter

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

Demo: Fiddle

Answer 2

Do it like this without hardcoding the tab index

<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>

then on your JS

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

Fiddler here

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