Mostrar y ocultar la clase activa en li cuando se hace clic en el botón de entrada

Quiero ir a la siguiente pestaña cuando hago clic en el siguiente botón que está en la primera pestaña. Al igual que para otras dos tabs también.

Busqué todas las cosas e intenté mucho agregar la clase activa a li particular cuando hice clic en el botón.

Por favor mira el código a continuación

  $(document).ready(function() { $('.nav-tabs > li > a').click(function(event){ event.preventDefault();//stop browser to take action for clicked anchor //get displaying tab content jQuery selector var active_tab_selector = $('.nav-tabs > li.active > a').attr('href'); //find actived navigation and remove 'active' css var actived_nav = $('.nav-tabs > li.active'); actived_nav.removeClass('active'); //add 'active' css into clicked navigation $(this).parents('li').addClass('active'); //hide displaying tab content $(active_tab_selector).removeClass('active'); $(active_tab_selector).addClass('hide'); //show target tab content var target_tab_selector = $(this).attr('href'); $(target_tab_selector).removeClass('hide'); $(target_tab_selector).addClass('active'); }); });   /** Start: to style navigation tab **/ .nav { margin-bottom: 18px; margin-left: 0; list-style: none; } .nav > li > a { display: block; } .nav-tabs{ *zoom: 1; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; } .nav-tabs:after { clear: both; } .nav-tabs > li { float: left; } .nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } li { line-height: 18px; } .tab-content.active{ display: block; } .tab-content.hide{ display: none; } /** End: to style navigation tab **/  

CUSTOMIZE

Content in tab 1
Content in tab 2
Content in tab 3

Por favor, ayúdame a encontrar la solución. Gracias

Puede encontrar la siguiente pestaña / li del elemento activo actual y agregar / eliminar la clase en consecuencia. Vea a continuación la solución

 $(document).ready(function() { //register click event handler for input with name=next $('.tab-content input[name="next"]').click(function(event){ event.preventDefault();//stop browser to take action for clicked anchor //get parent tab of next button clicked var $parent = $('.tab-content.active'); //get next tab var $nextTabParent = $parent.next('.tab-content'); //check if next tab exist or not if($nextTabParent.length > 0) { //remove active class from current tab and add active class to next tab $parent.removeClass('active').addClass('hide'); $nextTabParent.removeClass('hide').addClass('active'); //remove active class from current li and add it to next li var $activeLi = $('ul.nav.nav-tabs').find('li.active'); $activeLi.removeClass('active'); $activeLi.next('li').addClass('active'); } }); }); 
  .nav { margin-bottom: 18px; margin-left: 0; list-style: none; } .nav > li > a { display: block; } .nav-tabs{ *zoom: 1; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; } .nav-tabs:after { clear: both; } .nav-tabs > li { float: left; } .nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } li { line-height: 18px; } .tab-content.active{ display: block; } .tab-content.hide{ display: none; } 
  

CUSTOMIZE

Content in tab 1
Content in tab 2
Content in tab 3

Agregue esto a su código:

 $(".next").click(function () { if ($(".nav").find("li.active").next().length == 0) { $(".nav").find("li").first().find("a").trigger("click"); } else { $(".nav").find("li.active").next().find("a").trigger("click"); } }); 

Aquí está la demostración de JSFiddle

Usted ya escribió los códigos para agregar y eliminar clases.

Entonces, todo lo que tiene que hacer es encontrar el siguiente elemento li que no está activo y activar un clic en su etiqueta (que a su vez activa su código ya escrito).

La instrucción if se usa para seleccionar el primer li en caso de que se haga clic en el siguiente cuando esté activo el último li

Puede usar trigger() para simular hacer clic en tabs que ya tienen clic en el evento Ver el violín

HTML

 

CUSTOMIZE

Content in tab 1
Content in tab 2
Content in tab 3

JS

 $(document).ready(function () { $('.nav-tabs > li > a').click(function (event) { event.preventDefault(); //stop browser to take action for clicked anchor //get displaying tab content jQuery selector var active_tab_selector = $('.nav-tabs > li.active > a').attr('href'); //find actived navigation and remove 'active' css var actived_nav = $('.nav-tabs > li.active'); actived_nav.removeClass('active'); //add 'active' css into clicked navigation $(this).parents('li').addClass('active'); //hide displaying tab content $(active_tab_selector).removeClass('active'); $(active_tab_selector).addClass('hide'); //show target tab content var target_tab_selector = $(this).attr('href'); $(target_tab_selector).removeClass('hide'); $(target_tab_selector).addClass('active'); }); $('.tab-content input').click(function (event) { $(".nav.nav-tabs li.active").next("li").find("a").trigger("click"); }); }); 

La siguiente respuesta detallada reestructura su secuencia de comandos para ayudar a distinguir el patrón de definición y uso de selectores, la modificación de sus estados de control (es decir, agregar y eliminar clases), el uso de funciones en línea para representar un patrón de estrategia y declarativo (no anónimo ) manejo de eventos …

También modifiqué ligeramente su estructura html: usando el button en lugar del input type='button' de input type='button' y envolviendo texto con tags de extensión.


Muestra de demostración

 (function(window, $) { function OnClickNavTabLink(e) { // this = e.target e.preventDefault(); var $target_tabs = $(this); // 'a' var $target_nav = $target_tabs.parents('li'); var $target_tabs_content = $($target_tabs.attr('href')); //ie $('#tab1') or $('#tab2') or $('#tab3'); // note: 'attr' will return the attr of the first item in the selectors ClearAllControlStates(); SetControlState(); function SetControlState() { $target_nav .addClass('active'); $target_tabs .addClass('active'); $target_tabs_content .removeClass('hide') .addClass('active'); } } function OnClickNextButton(e) { e.preventDefault(); // this = button in $target_tabs_content var $target_tabs_content = $(this).parents('section[id*="tab"]').next(); // in this sample/demo, when clicking button in 'section#tab3', next will return 'script'; if ($target_tabs_content.attr('id')) // simple check, { var $target_tabs = $('.nav-tabs > li > a[href*="' + $target_tabs_content.attr('id') + '"]'); // 'a' var $target_nav = $target_tabs.parents('li'); ClearAllControlStates(); SetControlState(); } function SetControlState() { $target_nav .addClass('active'); $target_tabs .addClass('active'); $target_tabs_content .removeClass('hide') .addClass('active'); } } function ClearAllControlStates() { var $navs = $('.nav-tabs > li'); var $tabs = $navs.children('a'); var tabs_content = []; $tabs.each(GetHrefAttr); var $tabs_content = $(tabs_content); //console.log("$navs:= %o - $tabs:= %o - $tabs_content:= %o", $navs, $tabs, $(tabs_content)); $navs.removeClass('active'); $tabs.removeClass('active'); $tabs_content.each(HideEach); function GetHrefAttr(i, item) { tabs_content.push($(item).attr('href')); } function HideEach(i, item) { $(item).removeClass('active').addClass('hide'); } } function ClearActiveControlStates() { var $activated_nav = $('.nav-tabs > li.active'); //listitem var $activated_tabs = $activated_nav.children('a'); //hyperlinks var activated_tabs_content = []; $activated_tabs.each(GetHrefAttr); var $activated_tabs_content = $(activated_tabs_content); //section_ids $activated_nav.removeClass('active'); $activated_tabs.removeClass('active'); $activated_tabs_content.each(HideEach); function GetHrefAttr(i, item) { activated_tabs_content.push($(item).attr('href')); } function HideEach(i, item) { $(item).removeClass('active').addClass('hide'); } } function OnReadyDocument() { $('.nav-tabs > li > a') .click(OnClickNavTabLink); $('.tab-content button[name="next"]') .click(OnClickNextButton); } $(window.document).ready(OnReadyDocument); })(window, $ || jQuery.noConflict()); 
 /** Start: to style navigation tab **/ .nav { margin-bottom: 18px; margin-left: 0; list-style: none; } .nav > li > a { display: block; } .nav-tabs{ *zoom: 1; } .nav-tabs:before, .nav-tabs:after { display: table; content: ""; } .nav-tabs:after { clear: both; } .nav-tabs > li { float: left; } .nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px; } .nav-tabs { border-bottom: 1px solid #ddd; } .nav-tabs > li { margin-bottom: -1px; } .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } li { line-height: 18px; } .tab-content.active { display: block; } .tab-content.hide{ display: none; } /** End: to style navigation tab **/ 
  

CUSTOMIZE

Content in tab 1
Content in tab 2
Content in tab 3