如何使用jQuery选项卡来激活选项卡本身(不仅仅是内容)

Question

我已经看过了，但无法找到是否有可能从一个选项卡到另一个标签的转换。我指的是实际的选项卡，而不仅仅是标签的内容。

我希望前面的选项卡按钮淡出，而单击的选项卡按钮逐渐消失。

以下仅为内容动画：

$( "#tabs" ).tabs({ hide: 'fadeOut', show: 'fadeIn' });

这个是可能的吗？

HTML：

<div id="tabs">
  <ul>
    <li><a href="#fragment-1">One</a></li>
    <li><a href="#fragment-2">Two</a></li>
    <li><a href="#fragment-3">Three</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh     euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

Answer 1

我想出了怎么做。

通过在.newTab和.oldTab中使用beforeActivate，我能够与内容协调地激活实际的选项卡：

$( "#tabs" ).tabs({ hide: 'fadeOut', show: 'fadeIn' });

$( "#tabs").tabs({
beforeActivate: function( event, ui ) {
 ui.newTab.animate({
opacity: 0
}, 0, function() {ui.newTab.animate({
opacity: 1
}, 0, function() {});});   

 ui.oldTab.animate({
opacity: 0
}, 400, function() {ui.oldTab.animate({
opacity: 1
}, 0, function() {});});

}
});

Answer 2

我不认为JQuery Tabs小部件有此选项。您可以轻松地手动编写代码，以添加和删除类并对其进行动画化(尽管可以使用单击JQ。

$(“#tab ul li").bind("click"，function(){ $(”#tab ul li“).removeClass(”ui-tabs active ui-state-active")；$(This).addClass(“ui-tabs active ui-state-active")；})；