我怎么做我的jQuery UI的标签左右滑动？(how do I make my jquery ui

所以，我现在有与jQuery UI选项卡控制内容的网站。我有一个和下一个按钮，像这样

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <div class="left-arrow">
      <a class="prev-tab" href="#"><img src="left-arrow.png"></a>
    </div>
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    <div class="right-arrow">
      <a class="next-tab" href="#"><img src="right-arrow.png"></a>
    </div>
  </div>
  <div id="tabs-2">
    <div class="left-arrow">
      <a class="prev-tab" href="#"><img src="left-arrow.png"></a>
    </div>
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    <div class="right-arrow">
      <a class="next-tab" href="#"><img src="right-arrow.png"></a>
    </div>
  </div>
  <div id="tabs-3">
    <div class="left-arrow">
      <a class="prev-tab" href="#"><img src="left-arrow.png"></a>
    </div>
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
  <div class="right-arrow">
      <a class="next-tab" href="#"><img src="right-arrow.png"></a>
  </div>
</div>

我的JavaScript是像这样：

var $tabs = $('#art-quiz').tabs();

$('.next-tab').click(function(e){
    e.preventDefault();
    var selected = $tabs.tabs('option', 'selected');

    $tabs.tabs("option", "active", ( selected+1 ) );

});

$('.prev-tab').click(function(e){
    e.preventDefault();
    var selected = $tabs.tabs('option', 'selected') ;

    $tabs.tabs('select', ( selected - 1 ) );

});

我想，如果滑动我点击分组标签离开选项卡，然后滑动到右侧，如果我点击下一个选项卡。文档不给我就如何实现这一目标明确的答案。

Answer 1:

我想你说的是改变“隐藏”并在其上点击按钮，根据标签“秀”的动画内容。

这里有一个例子的jsfiddle它使用JavaScript的下方。

var $tabs = $('#tabs').tabs({
    activate: function( event, ui ) {
        $tabs.tabs('option', 'hide', false);
        $tabs.tabs('option', 'show', false);
    }
});

$('.next-tab').click(function (e) {
    e.preventDefault();
    $tabs.tabs('option', 'hide', { effect: 'slide', direction: 'left', duration: 300 });
    $tabs.tabs('option', 'show', { effect: 'slide', direction: 'right', duration: 300 });
    var selected = $tabs.tabs('option', 'active');
    $tabs.tabs('option', 'active', (selected + 1));
});

$('.prev-tab').click(function (e) {
    e.preventDefault();
    $tabs.tabs('option', 'hide', { effect: 'slide', direction: 'right', duration: 300 });
    $tabs.tabs('option', 'show', { effect: 'slide', direction: 'left', duration: 300 });
    var selected = $tabs.tabs('option', 'active');
    $tabs.tabs('option', 'active', (selected - 1));
});

它的作用是：

当你点击下一个选项卡，向左滑动当前选项卡，并从右侧的下一个选项卡。
当您单击上一个标签，幻灯片当前选项卡的权利，并从左边的一个选项卡。
当一个标签被激活，设置隐藏和显示回默认（假），这样点击标签本身并不做任何形式的幻灯片。

Answer 2:

演示上jsFidlle

$('#tabs').tabs();
var selected;

$(document).ready(function() {
  $('.next-tab').click(function(e){
     selected=$('#tabs').tabs('option', 'selected');
     selected++;
     $('#tabs').tabs('select', selected);
  });
  $('.prev-tab').click(function(e){
     selected=$('#tabs').tabs('option', 'selected');
     selected--;
     $('#tabs').tabs('select', selected);
  });
});