Next-Previous按鈕使用Bootstrap Tab循環工作

Question

當前「Previous」按鈕在第一個選項卡中不起作用，因爲它不在循環中。我應該如何設置它，以便當我的訪客點擊上一個時，它會顯示最後一個標籤？

HTML：

<div> 
    <ul id="wheel-tab" class="nav nav-tabs nav-justified"> 
     <li class="active"><a href="#ocean" data-toggle="tab">Ocean</a></li> 
     <li><a href="#air" data-toggle="tab">Air</a></li> 
     <li><a href="#customs" data-toggle="tab">Customs</a></li> 
     <li><a href="#transport" data-toggle="tab">Transport</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div id="ocean" class="tab-pane fade in active"> 
      <h2>Ocean</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="air" class="tab-pane fade in active"> 
      <h2>Air</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="customs" class="tab-pane fade in active"> 
      <h2>Customs</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
     <div id="transport" class="tab-pane fade in active"> 
      <h2>Transport</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#" id="wheel-left"role="button" data-slide="prev"> 
     <span class="icon icon-left">Prev</span> 
    </a> 
    <a class="right carousel-control" href="#" id="wheel-right" role="button" data-slide="prev"> 
     <span class="icon icon-right">Next</span> 
    </a> 
</div> 

JS：

var $tabs = $('#wheel-tab li'); 

$('#wheel-left').on('click', function() { 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

$('#wheel-right').on('click', function() { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

DEMO

Answer 1

您可以相對於長度的檢查添加到prev和next，如果它存在只是繼續正常別的，請分別切換last/first選項卡。看看下面的解決方案，也經歷評論：

$('#wheel-left').on('click', function() { 
    var prevLen = $tabs.filter('.active').prev('li').length; //check if prev li is present 
    if (prevLen) 
     $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');//if yes then continue with normal tab switch 
    else 
     $tabs.filter('li:last').find('a[data-toggle="tab"]').tab('show');//else show the last tab 
}); 

$('#wheel-right').on('click', function() { 
    var nextLen = $tabs.filter('.active').next('li').length;//check if next li is present 
    if (nextLen) 
     $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');//if yes then continue with normal tab switch 
    else 
     $tabs.filter('li:first').find('a[data-toggle="tab"]').tab('show');//else show the first tab 
}); 

Updated Fiddle

Answer 2

嘗試以下操作：

使用:first和:last測試，如果在其最後一個/第一個項目列表，如果是顯示第一個/最後一個標籤

var $tabs = $('#wheel-tab li'); 

    $('#wheel-left').on('click', function() { 
     if($('.active').is('#wheel-tab li:first')) { 
      $('#wheel-tab li:last').find('a[data-toggle="tab"]').tab('show'); 
     } else { 
     $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show'); 
     } 
    }); 

    $('#wheel-right').on('click', function() { 
    if($('.active').is('#wheel-tab li:last')) { 
      $('#wheel-tab li:first').find('a[data-toggle="tab"]').tab('show'); 
     } else { 
     $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
     } 
    }); 

https://jsfiddle.net/pc28q6wa/

或：

var $tabs = $('#wheel-tab li'); 
var first = $('#wheel-tab li:first'); 
var last = $('#wheel-tab li:last'); 

$('#wheel-left').on('click', function() { 
    if($('.active').is(first)) { 
     last.find('a[data-toggle="tab"]').tab('show'); 
    } else { 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show'); 
    } 
}); 

$('#wheel-right').on('click', function() { 
if($('.active').is(last)) { 
     first.find('a[data-toggle="tab"]').tab('show'); 
    } else { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
    } 
}); 

Answer 3

我曾嘗試這個代碼，它是完全爲我工作。看看吧。

$('#wheel-left').on('click', function() { 

if($tabs.filter('.active').prev('li').is('li') > 0) { 
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');  
} 
else{ 
    $tabs.last().tab('show');  
} 
}); 

$('#wheel-right').on('click', function() { 
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show'); 
}); 

感謝