jQuery選項卡的傳送帶導航

Question

我需要添加一個prev/next導航（作爲傳送帶）到我的jQuery選項卡，但不知道如何完成此操作。這是我到目前爲止有：

的Javascript

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('ul.tabs li').click(function(){ 
      var tab_id = $(this).attr('data-tab'); 
      $('ul.tabs li').removeClass('current'); 
      $('.tab-content').removeClass('current'); 
      $(this).addClass('current'); 
      $("#"+tab_id).addClass('current'); 
      }); 
     }); 
    </script> 

HTML

<div class="tabs"> 
    <button id="next-left"> <- </button> 
    <button id="next-right"> -> </button> 
    <ul class="tabs"> 
     <li class="tab-link current" data-tab="tab-1">One</li> 
     <li class="tab-link" data-tab="tab-2">Two</li> 
     <li class="tab-link" data-tab="tab-3">Three</li> 
    </ul> 
    <div id="tab-1" class="tab-content current"> 
     content 1 
    </div> 
    <div id="tab-2" class="tab-content"> 
     content 2 
    </div> 
    <div id="tab-3" class="tab-content"> 
     content 3 
    </div>    
</div> 

JSFiddle link

Answer 1

如果我有你的權利，你希望所有的標籤上帶有導航同一行 - 左右滑動的箭頭。

我不認爲有一個純粹的jQuery UI的解決方案，但此訊息可能是同一個問題： How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Answer 2

好吧，我解決了這個問題，但它的JavaScript和jQuery的一個太大混合現我認爲（我的jquery不是那麼好...）所以也許有人可以給我一個（清潔）jquery-only-code？

HTML：

<div class="tabs"> 
    <button class="tab_nav" id="next_left"> <- </button> 
    <button class="tab_nav" id="next_right"> -> </button> 
    <ul class="tabs"> 
     <li class="tab-link current" id="link-1" data-tab="tab-1">One</li> 
     <li class="tab-link" id="link-2" data-tab="tab-2">Two</li> 
     <li class="tab-link" id="link-3" data-tab="tab-3">Three</li> 
    </ul> 
    <div id="tab-1" class="tab-content current"> 
     content 1 
    </div> 
    <div id="tab-2" class="tab-content"> 
     content 2 
    </div> 
    <div id="tab-3" class="tab-content"> 
     content 3 
    </div>    
</div> 

JS：

$(document).ready(function(){ 
    $('ul.tabs li').click(function(){ 
     var tab_id = $(this).attr('data-tab'); 
     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 
     $(this).addClass('current'); 
     $("#"+tab_id).addClass('current'); 
    }); 
}); 

$(document).ready(function(){ 
    $('.tab_nav').click(function(){ 
     if(this.id == 'next_left') { 
      $d = 'l'; 
     } 
     if(this.id == 'next_right') { 
      $d = 'r'; 
     } 
     $max = document.getElementsByClassName('tab-link').length; 
     $currentlink = document.getElementsByClassName('current')[0].id; 
     $arraylink = $currentlink.split('-'); 
     $curlink = $arraylink[1]; 
     $('ul.tabs li').removeClass('current'); 
     $('.tab-content').removeClass('current'); 
     if ($d == 'l') { 
      if ($curlink == 1) { 
       $link = "#link-"+ $max; 
       $tab = "#tab-"+ $max; 
      } 
      else { 
       $link = "#link-" + ($curlink-1); 
       $tab = "#tab-" + ($curlink-1); 
      } 
     } 
     else if ($d == 'r') { 
      if ($curlink == $max) { 
       $link = "#link-1"; 
       $tab = "#tab-1"; 
      } 
      else { 
       $link = "#link-" + (parseInt($curlink)+1); 
       $tab = "#tab-" + (parseInt($curlink)+1); 
      } 
     } 
     $($link).addClass('current'); 
     $($tab).addClass('current'); 
    }); 
});