jquery 语义-ui 选项卡转换

Question

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

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

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

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

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

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

我的 View 如下所示:

    <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 表示您正在寻找一个元素内具有 segment 类的元素在具有类 ui 的元素内具有类 tab。相反，您需要寻找的是具有所有这些类的元素，这意味着您需要删除空格。如果您想了解有关选择器的更多信息，this可能是一个很好的起点。

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

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

1. 隐藏显示的选项卡，因为这在 jQuery 单击事件触发时已经发生。
2. 显示上一个选项卡，以便使用动画隐藏它。
3. 在当前选项卡和上一个选项卡上应用过渡 - 这将隐藏一个选项卡并显示另一个选项卡。
4. 记住当前选项卡，以便您知道在下一个选项卡更改时将其用作上一个选项卡。

这是执行此操作的代码:

 $(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 事件而不是 click 事件 - 这通常是一个好主意，它确保选项卡内容变得可见，以便我们可以隐藏它并为其设置动画。