A Pen by Anonasaurus Rex.

dHIgb.markdown

dHIgb

A Pen by A Non Ymous on CodePen.

License.

index.html

<fieldset>
  <legend>Fieldset</legend>
  <input type="button" value="Anterior" id="ant"/>
  <input type="button" value="Próxima" id="prox"/>
</fieldset>
<br/><br/>
<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>
    <li><a href="#tabs-4">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
    <p>Um</p>
  </div>
  <div id="tabs-2">
    <p>Dois</p>
  </div>
  <div id="tabs-3">
    <p>Tres</p>
  </div>
  <div id="tabs-4">
    <p>Quatro</p>
  </div>
</div>

script.js

$("#tabs").tabs();

// numero de tabs geradas
$numTabs = $("#tabs ul li").length

// função do botão próximo
$("#prox").click(function(){  
  // aba que esta ativa no momento
  $currentTab = parseInt($("#tabs ul li.ui-state-active a").attr("id").replace(/\D/g,''));
  
  // se for a ultima, nao deixa mudar
  // caso contrário, vai pra prox
  if ($currentTab == $numTabs){
    alert("Já está na ultima aba")
  } else {
    $("#ui-id-" + ($currentTab + 1)).click();
  }
})

// função do botão anterior
$("#ant").click(function(){  
  // aba que esta ativa no momento
  $currentTab = parseInt($("#tabs ul li.ui-state-active a").attr("id").replace(/\D/g,''));
  
  // se for a primeira, nao deixa mudar
  // caso contrário, vai pra anterior
  if ($currentTab == 1){
    alert("Já está na primeira aba")
  } else {
    $("#ui-id-" + ($currentTab - 1)).click();
  }
})

style.css

body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}