How to select a specific tab by clicking the button

Question

I have a page that turns a list <ul> in flaps with jQuery, and on the first page I need a button to redirect to the next tab, without needing the user to click with the mouse. I’ve tried with the onClick or a JS function, but it opens in a new window or even instead of selecting the tab.

Html:

<div id="tabs">
   <ul>
      <li><a href="#tab2">Arquivo</a></li>
      <li><a href="#tab3">Download</a></li>
      <li><a href="#tab4">Parâmetros</a></li>
   </ul>
</div>

Javascript:

<script language="javascript">
   $(function (){
     $("#tabs").tabs({active:1});
   });
</script>

Answer 1

To change the tab, you really need the event to click the button inside the contents of the tab.

Then just use the plugin itself to activate the tab you want.

$("button").on('click', function(){
    $("#tabs").tabs('option', 'active', 2 /*index da aba que você quer selecionar*/);  
});

See working:

$("#tabs").tabs({
 activate: function (event, ui) {
    var active = $('#tabs').tabs('option', 'active');
    $("#tabid").html('the tab id is ' 
       + $("#tabs ul>li a").eq(active).attr("href")
    );
  }
});

$("button").on('click', function(){
    $("#tabs").tabs('option', 'active', 1);
    /*index da aba que você quer selecionar*/
});

body {
    background-color: #eef;
}
#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
    <ul>
        <li>
           <a href="#tabs-1">Tab 1</a>
        </li>
        <li>
           <a href="#tabs-2">Tab 2</a>
        </li>
        <li>
           <a href="#tabs-3">Tab 3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>
          <button type="button"> Ir para a próxima página </button>
        </p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>
<div id="tabid"></div>