Saltar al contenido

Pestañas Bootstrap: botones Siguiente y Anterior para formularios

Esta es la contestación más completa que te podemos dar, sin embargo mírala detenidamente y analiza si se puede adaptar a tu proyecto.

Solución:

Primero de todo : EL IDENTIFICADOR DEBE SER ÚNICO

Aquí está su código de trabajo: http://www.bootply.com/120472

html:



J.S.:

 $('.btnNext').click(function()
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
);

  $('.btnPrevious').click(function()
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
);

Retazo:

 $('.btnNext').click(function()
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
);

  $('.btnPrevious').click(function()
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
);




Para arranque 4





$('.next').click(function () 
    $('.nav-tabs > .nav-item > .active').parent().next('li').find('a').trigger('click');
);

$('.previous').click(function () 
    $('.nav-tabs > .nav-item > .active').parent().prev('li').find('a').trigger('click');
);

Cualquiera que desee realizar las siguientes operaciones anteriores en la pestaña, siga los siguientes pasos:

a) Coloque los botones siguiente anterior en cada panel de pestañas

b) Vincule los clics de los botones al cuerpo para que se llame al hacer clic

c) Al hacer clic en el disparador, haga clic en la pestaña siguiente/anterior

d) Si es la última pestaña, redirigir al usuario a la pestaña adecuada (Llamar a los eventos de la primera o la última pestaña)

/**** JQuery *******/
jQuery('body').on('click','.next-tab', function()
      var next = jQuery('.nav-tabs > .active').next('li');
      if(next.length)
        next.find('a').trigger('click');
      else
        jQuery('#myTabs a:first').tab('show');
      
);

jQuery('body').on('click','.previous-tab', function()
      var prev = jQuery('.nav-tabs > .active').prev('li')
      if(prev.length)
        prev.find('a').trigger('click');
      else
        jQuery('#myTabs a:last').tab('show');
      
);
/******* CSS *********/
.previous-tab,
.next-tab
	display: inline-block;
	border: 1px solid #444348;
	border-radius: 3px;
	margin: 5px;
	color: #444348;
	font-size: 14px;
	padding: 10px 15px;
	cursor: pointer;






tab1 content

//Include next prev buttons in the tab-content

previous next

tab2 content

//Include next prev buttons in the tab-content

previous next

Si aceptas, eres capaz de dejar un artículo acerca de qué te ha impresionado de esta división.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 3.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *