How to select a specific tab by clicking the button

Question

How to select a specific tab by clicking the button

Navigation

#1 by (0 votes)

0

I have a page that transforms a <ul> _list into tabs with jQuery , and on the first page I need a button to redirect to the next tab, without having to click the mouse. I have tried with onClick or a JS function, but it opens in a new window or in the same window 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>

javascript html jquery

asked by anonymous 29.03.2018 / 20:21

1 answer

Wordpress slider broke and I can not fix it Jquery - include variables in ajax

score 0 · Accepted Answer

To change the tab, you really need the button click event inside the tab content.

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 it 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><linkhref="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><divid="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>