0

Tenho uma página que transforma uma lista <ul> em abas com jQuery, e na primeira página preciso que um botão redirecione para a próxima aba, sem precisar que o usuário clique com o mouse. Já tentei com o onClick ou uma função JS, mas ele abre em uma nova janela ou na mesma ao invés de selecionar a aba.

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>
2
  • Ué, mas de onde vem essa função .tabs? Qual o plugin
    – Phiter
    Commented 29/03/2018 às 18:29
  • Ops, editei no post, usa jQuery Commented 29/03/2018 às 18:30

1 Resposta 1

0

Pra mudar de aba, vc precisa realmente do evento do clique no botão dentro do conteúdo da aba.

Daí é só usar o próprio plugin pra ativar a aba que você quer.

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

Veja funcionando:

$("#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>

1
  • Obrigado, funcionou perfeitamente! Commented 29/03/2018 às 19:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .