下一個和上一個按鈕功能不起作用

Question

我已經使用下一個和上一個按鈕功能創建了選項卡內容。但是下一個和上一個按鈕功能不起作用。我已經使用jquery.min.js版本1.11.1版本。我已經創建瞭如下的代碼片段。我已經提到this question並創建了答案中提到的功能。但仍然不起作用。

$("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

因此，這些都是我對你的代碼進行更改：

所有的

1. 一是kyc-tab-wrapper結束標記後tab2關閉- 固定的。

2. 而是有多個監聽器來切換標籤頁，則可以在第一監聽器本身有這樣的：

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

3. 的下一個和以前按鈕不起作用，你正在做的prev和next上a - 你應該用li爲li從事的運動是兄弟姐妹：

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

4. 您可以只需觸發器單擊該選項卡而不是再次進行登錄。

5. 還增加了一個初始觸發顯示第一個選項卡使用$(".tab.active").trigger('click')

觀看演示以下時，頁面加載：

$("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

對於Next按鈕工作更改以下線條狀的下方。

// 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'); 

對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

在你的代碼的問題是你沒有正確對焦下一首或上a標籤。