jquery 语义-ui 选项卡转换

Question

我正在尝试在选项卡式布局中使用过渡。

我正在研究 Laravel 框架。我的 js 代码不起作用...

期望的结果：选项卡内容随着转换的实现而出现和消失。

现在：选项卡正确切换，但立即 - 没有过渡。

$('#tabnavigation .item').click(function() {

$('.ui .tab .segment').transition('slide down');
});

我的观点是这样的：

    <a class="item red active" data-tab="first">One</a>
    <a class="item blue" data-tab="second">Two</a>
    <a class="item blue" data-tab="third">Three</a>
    <a class="item blue" data-tab="fourth">Four</a>
    <a class="item blue" data-tab="fifth">Five</a>



  </div>


  <div class="ui tab segment active" data-tab="first">

      @include('widgets._15_elections_introduction')



  </div>
  <div class="ui tab segment" data-tab="second">




       @include('widgets._15_elections_bycandidate')




  </div> {{-- second --}}
  <div class="ui tab segment" data-tab="third">


      @include('widgets._15_elections_byelectoralcommitee')



  </div>

  <div class="ui tab segment" data-tab="fourth">


      @include('widgets._15_elections_add_refine')



  </div>

  <div class="ui tab segment" data-tab="fifth">


      @include('widgets._15_elections_help')



  </div>

有人帮帮我吗？

Answer 1

没有任何反应的原因是因为你的选择器是错误的 - .ui .tab .segment 意味着你正在寻找一个包含 class segment 的元素在具有 class ui 的元素中包含 class tab 的元素。相反，您需要寻找的是一个包含所有这些 class 的元素，这意味着您需要删除空格。如果您想了解有关选择器的更多信息，this 可能是一个不错的起点。

简而言之，将 $('.ui .tab .segment').transition('slide down'); 替换为 $('.ui.tab.segment').transition('slide down'); 将使其有效……嗯，有点。它仍然不会执行您想要的操作，因为在您的 click 事件发生时，选项卡已经显示并且 transition 方法将简单地隐藏它。

为了做你想做的事，你需要：

隐藏显示的选项卡，因为这在 jQuery 单击事件触发时已经发生。
显示上一个选项卡，以便使用动画隐藏它。
在当前选项卡和上一个选项卡上应用转换 - 这将隐藏一个并显示另一个。
记住当前选项卡，以便您知道在下一个选项卡更改中像以前一样使用它。

下面是执行此操作的代码：

 $(document).ready(function () {
     // remember the tab currently active
     var previous = $('.ui.tab.segment.active');

     $('#tabnavigation .item').tab({
         onVisible: function (e) {
             var current = $('.ui.tab.segment.active');
             // hide the current and show the previous, so that we can animate them
             previous.show();
             current.hide();

             // hide the previous tab - once this is done, we can show the new one
             previous.transition({
                 animation: 'horizontal flip',
                 onComplete: function () {
                     // finally, show the new tab again
                     current.transition('horizontal flip');
                 }
             });

             // remember the current tab for next change
             previous = current;
         }
     });
 });

注意： 我使用了 Semantic UI 的 onVisible 事件而不是点击事件 - 这通常是个好主意，它确保选项卡内容变得可见, 这样我们就可以隐藏它并为其设置动画。

Answer 2

使用这种格式<div class="ui transition transition-type in tab" data-tab="tab-name">

（即） <div class="ui transition scale in tab" data-tab="tab-1">

一切正常。

jquery 语义-ui 选项卡转换

jquery semantic-ui tab transitions

jquery

tabbed-interface

laravel

semantic-ui