Implementacion de pestañas en Jquery

[andre___5025]

Hola amigo. Trato de implementar un código muy util ahora con tres pestañas pero resulta que en la segunda le coloque un botón para avanzara hacia la tercera pero el boton no hace nada. En la tercera pestaña coloque un boton para retroceder a la segunda pestaña pero me devuelve a la primera. Me podrían colaborar por favor. Dejo mi código para mostrar lo que he hecho.

Código HTML:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Datos personales</a></li>
<li><a href="#tabs-2">Datos victimizantes</a></li>
<li><a href="#tabs-3">Datos complementarios</a></li>
</ul>
<div id="tabs-1">
* N&uacute;mero de documento:<input class="required" type=text name="numdoc" id="numdoc" onKeyPress="cargando(this)" onBlur="comprobarU(this)" MAXLENGTH=20 onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"></input> 
* Nombres:<input type="text" class="required" name="nombres" MAXLENGTH="45"></input><br>
<button id="btnToVictimizantes" name="btnToVictimizantes" type="button">Siguiente >></button>
</div>
<div id="tabs-2">
* Apellidos: <input type=text class="required" name="apellidos" MAXLENGTH=45></input>
* Edad:<select class="required" name="edad">
<option value="">Seleccione...</option> 
<option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option>
</select>
<br>
<button id="btnToPersonales" name="btnToPersonales" type="button"><< Anterior</button> 
<button id="btnToComp" name="btnToComp" type="button">Siguiente >></button> 
</div>
<div id="tabs-3">
* Sexo:<input type="text" class="required" name="sexo" MAXLENGTH="45"></input><br>
<button id="btnToVict" name="btnToVict" type="button"><< Anterior</button>
<input name="enviar" type="submit" class="button white" value="Guardar formulario">
</div>
</div>
 

Código Javascript:

jQuery.fn.validateTab = function (toTab) {
var isValid = true;
$(this).find("input, select").each(function () {
if (isValid) {
isValid = $(this).valid();
} else {
$(this).valid();
}
});
if (isValid) {
if (!toTab) {
toTab = 0;
}
$("#tabs").tabs('select', toTab);
}
return false;
}
$(document).ready(function () {
$('#btnToVictimizantes').click(function (e) {
e.preventDefault();
$("#tabs-1").validateTab(1);
});
$('#btnToPersonales').click(function (e) {
e.preventDefault();
$("#tabs-2").validateTab(0);
});
$('#btnToComp').click(function (e) {
e.preventDefault();
$("#tabs-2").validateTab(1);
});
$('#btnToVict').click(function (e) {
e.preventDefault();
$("#tabs-3").validateTab(0);
});
});
 

Estoy implementando de acuerdo a este blog donde lo encontré:

http://pixelcoblog.com/jquery-ui-tab.../#.U7ob2ZR5P1Z

[Alexis88]

Hace unos meses hice un ejemplo con pestañas creadas usando solo CSS. Aquí puedes ver el código y así es como resulta:



Para tu caso, solo te quedaría colocar cada bloque de tu formulario en un contenedor diferente y asignarle una pestaña a cada uno.

Saludos

[andre___5025]

Hola Alexis. Gracias disponer de tu tiempo y responder. En realidad las pestañas las utilizo solo para dividir mi formulario, En realidad lo que me interesan son los botones que hacen pasar a la siguiente pestaña. Inicialmente el ejemplo venia con dos pestañas que pasaba de la primera a la segunda presionando el boton "Siguiente" pero como en mi caso tengo que hacer tres pestañas pense que iba a ser facil agregarle otra funcion al JS y ya pero en realidad me ha costado trabajo. El problema lo tengo aqui.

Código Javascript:

$(document).ready(function () {
$('#btnToVictimizantes').click(function (e) {
e.preventDefault();
$("#tabs-1").validateTab(1);
});
$('#btnToPersonales').click(function (e) {
e.preventDefault();
$("#tabs-2").validateTab(0);
});
$('#btnToComp').click(function (e) {
e.preventDefault();
$("#tabs-2").validateTab(1);
});
$('#btnToVict').click(function (e) {
e.preventDefault();
$("#tabs-3").validateTab(0);
});
});
 

La verdad no entiendo por que en la pestaña dos el botón "siguiente" no me pasa a la tercera pestaña y en la tercera pestaña el boton "Anterior" no me devuelve a la segunda sino a la primera pestaña. Si me pudieras colaborar en que estoy fallando te lo agradeceria mucho. llevo Dias estancado en este paso y pues pense que iba a ser mas facil. Gracias