Question

我的开发人员在为我的网站创建某个表格系统时遇到了很多麻烦。我的网站在同一页面上有几个标签部分（对于产品，因此有很多标签）。

我们需要做到以下几点：

所有标签均默认关闭
我需要标签慢慢打开并缓慢关闭，但只能打开标签部分的第一个标签页。因此，如果我第一次在某个部分打开一个标签，它应该慢慢打开。如果我单击同一部分中的选项卡，则只需替换选项卡，而不是关闭前一个选项卡并打开下一个选项卡。
请注意，有三个标签部分。我想要它，所以一次只有一个标签部分可以打开标签。因此，如果我在第一个选项卡部分打开了一个选项卡，然后单击第二个选项卡部分上的选项卡，则当前打开的选项卡会在新部分缓慢打开的同时缓慢关闭。我希望这个动作能够在同一时间发生，所以等待时间会减少。

这是每个标签的HTML外观：

<div class="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">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>content 1</p>
  </div>
  <div id="tabs-2">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>content 2</p>
  </div>
  <div id="tabs-3">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>content 3</p>
  </div>
</div>

jQuery正在调用jQuery UI函数：

  $(function() {
    $( ".tabs" ).tabs({
      collapsible: true
    });
  });

Answer 1

这是一个使用activate回调的解决方案，并假设其他标签集合将是已激活的标签集合的兄弟姐妹

  $(function () {
      $(".tabs").tabs({
          collapsible: true,
          show: {
              effect: "blind",
              duration: 800
          },
          active: false,
          activate:function(evt,ui){
              var $currTabs = ui.newTab.closest('.tabs');              
              $currTabs.siblings().tabs("option", { active: false } );             
          }
      });
  });

的 DEMO

在效果似乎已经完成之前，此回调不会触发，因此时间可能不是您关闭其他选项卡所需的时间，但它已经开始。

已更新：使用beforeActivate回调折叠其他标签，仅在收藏中的所有标签均已关闭时动画内容开启

var inactiveOpts = { active: false, show: { effect: 'blind' } } var $tabs = $(".tabs").each(function () { var currTab = this, tabsOpts = { collapsible: true, beforeActivate: function (evt, ui) { $tabs.not(this).tabs("option", inactiveOpts) }, activate: function (evt, ui) { $(currTab).tabs('option', { show: false }); } } $.extend(tabsOpts, inactiveOpts); $(this).tabs(tabsOpts); });

的 DEMO 2

Answer 2

也许还有另一个更优雅的解决方案，但是这里有一个使用click事件在标签部分上的解决方案，使用activate关闭其他标签：

$(function() {
    // get all tabs
    var tabs = $(".tabs").tabs({
            collapsible: true,
            active: false
    });    
    // for each tabs
    $.each(tabs, function(index, element) {
        // if click on div tab
        $(element).click(function(){ 
            // close others except this
            for(var i = 0;i<tabs.length;i++){
                if(i != index){
                    $(tabs[i]).tabs('option','active',false);
                }
            }
        });
    });
});

试试这个jsfiddle

修改：

要更改show和hide动画持续时间，具体取决于它是第一个打开标签页还是最后一个关闭标签页，您可以更改show和hide beforeActivate事件中的属性，检查是否有ui.oldTab或ui.newTab（请参阅documentation here）:.解决方法可能是：

$(function() {
    var tabs = $(".tabs").tabs({
            collapsible: true,
            active: false,
            beforeActivate: function( event, ui ) {
                if(!ui.newTab.length){
                    // collapsing last one set hide "slow"
                    $(this).tabs('option','hide',{ duration : 1000});
                }else{
                    // not collapsing last one set hide "quick"
                       $(this).tabs('option','hide',{ duration : 1});
                }

                if(!ui.oldTab.length){
                       // open first one, show "slow"
                    $(this).tabs('option','show',{ duration : 1000});
                }else{
                    // not first, open "quick"
                    $(this).tabs('option','show',{ duration : 1});
                }

            }
    });    
    // for each tabs
    $.each(tabs, function(index, element) {
        // if click on div tab
        $(element).click(function(){ 
            // close others except this
            for(var i = 0;i<tabs.length;i++){
                if(i != index){
                    // close all
                    $(tabs[i]).tabs('option','active',false);
                }
            }
        });
    });
});

尝试完整的jsfiddle

用jQuery和amp;慢慢打开标签只允许一个标签部分一次打开一个标签

2 个答案: