La fonctionnalité du bouton suivant et précédent ne fonctionne pas

Question

J'ai créé un contenu d'onglet avec la fonctionnalité de bouton suivant et précédent. Mais la fonctionnalité du bouton suivant et précédent ne fonctionne pas. J'ai utilisé la version 1.11.1 de jquery.min.js. J'ai créé un extrait comme ci-dessous. J'ai référé this question et créé la fonctionnalité comme mentionné dans la réponse. mais ça ne marche toujours pas.

$("ul.kyc-tab-list li a").click(function() { 
 
     $("ul.kyc-tab-list li a").removeClass("active"); 
 
     $(this).addClass("active"); 
 
    }); 
 

 
    $(".tab-btn1").click(function() { 
 
     $("#tab1").show(); 
 
     $("#tab2").hide(); 
 
     $("#tab3").hide(); 
 
     $("#tab4").hide(); 
 
     $("#tab5").hide(); 
 
    }); 
 

 
    $(".tab-btn2").click(function() { 
 
     $("#tab1").hide(); 
 
     $("#tab2").show(); 
 
     $("#tab3").hide(); 
 
     $("#tab4").hide(); 
 
     $("#tab5").hide(); 
 
    }); 
 

 
    $(".tab-btn3").click(function() { 
 
     $("#tab1").hide(); 
 
     $("#tab2").hide(); 
 
     $("#tab3").show(); 
 
     $("#tab4").hide(); 
 
     $("#tab5").hide(); 
 
    }); 
 

 
    $(".tab-btn4").click(function() { 
 
     $("#tab1").hide(); 
 
     $("#tab2").hide(); 
 
     $("#tab3").hide(); 
 
     $("#tab4").show(); 
 
     $("#tab5").hide(); 
 
    }); 
 

 
    $(".tab-btn5").click(function() { 
 
     $("#tab1").hide(); 
 
     $("#tab2").hide(); 
 
     $("#tab3").hide(); 
 
     $("#tab4").hide(); 
 
     $("#tab5").show(); 
 
    }); 
 
    
 
    
 
    $('#btnNext').click(function() { 
 

 

 
     // get current tab 
 

 
     var currentTab = $(".tab.active"); 
 

 
     // get the next tab, if there is one 
 
     var newTab = currentTab.next(); 
 

 
     // at the end, so go to the first one 
 
     if (newTab.length === 0) { 
 
      newTab = $(".tab").first(); 
 
     } 
 

 
     currentTab.removeClass('active'); 
 
     // add active to new tab 
 
     newTab.addClass('active'); 
 
    }); 
 

 
    $('#btnPrevious').click(function() { 
 
     // get current tab 
 
     var currentTab = $(".tab.active"); 
 

 
     // get the previous tab, if there is one 
 
     var newTab = currentTab.prev(); 
 

 
     // at the start, so go to the last one 
 
     if (newTab.length === 0) { 
 
      newTab = $(".tab").last(); 
 
     } 
 

 
     currentTab.removeClass('active'); 
 
     // add active to new tab 
 
     newTab.addClass('active'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 

 
<section> 
 

 
    <div class="kyc-tab-wrapper"> 
 
         <ul class="kyc-tab-list"> 
 
         <li> 
 
          <a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a> 
 
         </li> 
 
         <li> 
 
          <a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact/Promotors</a> 
 
         </li> 
 
         <li> 
 
          <a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank/Business</a> 
 
         </li> 
 
         <li> 
 
          <a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a> 
 
         </li> 
 
         <li> 
 
          <a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a> 
 
         </li> 
 
        </ul> 
 
        
 
         <div class="kyc-tab-content" id="tab1"> 
 
         
 
         tab 1 
 
         </div> 
 
           <div class="kyc-tab-content" id="tab2"> 
 
         tab 2 
 
         </div>   
 
           </div> 
 
           
 
            <div class="kyc-tab-content" id="tab3"> 
 
             tab 3 
 
         
 
            </div> 
 
                <div class="kyc-tab-content" id="tab4"> 
 
                tab 4 
 
                </div> 
 
                 <div class="kyc-tab-content" id="tab5"> 
 
            
 
            tab 5</div> 
 
                 
 
                 <div class="kyc-tab-form-btn-wrap"> 
 
         <button id="btnPrevious" style="display:none"> Previous</button> 
 
         <button id="btnNext">Next </button> 
 
        </div> 
 
         </div> 
 
    </div> 
 
</section> 
 

 

 
</div>

Answer 1

Ce sont les changements que je l'ai fait à votre code:

1. Tout d'abord, la balise de fermeture de kyc-tab-wrapper a été fermé après tab2 - fixe.

2. Au lieu d'avoir plusieurs auditeurs pour changer les onglets, vous pouvez inclure dans le premier auditeur lui-même:

   $(".kyc-tab-content").hide(); 
   $($(this).attr('class').split(' ').find(function(e) { 
       return e.startsWith('tab-btn'); 
   }).replace('tab-btn', '#tab')).show(); 
   

3. Les suivant et boutons précédents ne fonctionnent pas comme vous faites prev et next sur a - vous devriez faire avec li comme li s sont les frères et soeurs:

   currentTab.closest('li').prev().find('a'); 
   currentTab.closest('li').next().find('a'); 
   

4. Vous pouvez simplement déclencher cliquez sur l'onglet au lieu de faire la connexion à nouveau.

5. ajoutant également un initial déclencheur pour afficher le premier onglet lorsque les charges de page à l'aide $(".tab.active").trigger('click')

Voir la démo ci-dessous:

$("ul.kyc-tab-list li a").click(function() { 
 
    $("ul.kyc-tab-list li a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    /* Do this instead of multiple listeners */ 
 
    $(".kyc-tab-content").hide(); 
 
    $($(this).attr('class').split(' ').find(function(e) { 
 
    return e.startsWith('tab-btn'); 
 
    }).replace('tab-btn', '#tab')).show(); 
 
}); 
 

 
// active tab load initially 
 
$(".tab.active").trigger('click'); 
 

 

 
$('#btnNext').click(function() { 
 
    var currentTab = $(".tab.active"); 
 
    var newTab = currentTab.closest('li').next().find('a'); 
 
    if (newTab.length === 0) { 
 
    newTab = $(".tab").first(); 
 
    } 
 
    newTab.trigger('click'); 
 
}); 
 

 
$('#btnPrevious').click(function() { 
 
    var currentTab = $(".tab.active"); 
 
    var newTab = currentTab.closest('li').prev().find('a'); 
 
    if (newTab.length === 0) { 
 
    newTab = $(".tab").last(); 
 
    } 
 
    newTab.trigger('click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <section> 
 
    <div class="kyc-tab-wrapper"> 
 
     <ul class="kyc-tab-list"> 
 
     <li> 
 
      <a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a> 
 
     </li> 
 
     <li> 
 
      <a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact/Promotors</a> 
 
     </li> 
 
     <li> 
 
      <a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank/Business</a> 
 
     </li> 
 
     <li> 
 
      <a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a> 
 
     </li> 
 
     <li> 
 
      <a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a> 
 
     </li> 
 
     </ul> 
 
     <div class="kyc-tab-content" id="tab1">tab 1</div> 
 
     <div class="kyc-tab-content" id="tab2">tab 2</div> 
 
     <div class="kyc-tab-content" id="tab3">tab 3</div> 
 
     <div class="kyc-tab-content" id="tab4">tab 4</div> 
 
     <div class="kyc-tab-content" id="tab5">tab 5</div> 
 
     <div class="kyc-tab-form-btn-wrap"> 
 
     <button id="btnPrevious"> Previous</button> 
 
     <button id="btnNext">Next </button> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</div>

Answer 2

Pour bouton Next pour travailler changer les lignes suivantes comme ci-dessous.

// get current tab 
var currentTab = $(".tab.active").closest("li"); 
//get the next tab, if there is one 
var newTab = currentTab.next().find("a.tab"); 
//... 
currentTab.find(".tab").removeClass('active'); 

Effectuez également les modifications similaires pour le bouton Prev.

// get current tab 
var currentTab = $(".tab.active").closest("li"); 
// get the previous tab, if there is one 
var newTab = currentTab.prev().find("a.tab"); 
//... 
currentTab.find(".tab").removeClass('active'); 

Fiddle Demo

Le problème dans votre code est vous n'êtes pas Recentrer le suivant ou précédent tag a correctement.