JQuery семантически-UI вкладки переходов

Question

Я пытаюсь использовать переходы в макете с вкладками.

Я работаю над Laravel Framework. Мой код 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 означает, что вы ищете элемент с сегментом класса внутри элемента с вкладкой класса внутри элемента с классом ui. Вместо этого вам нужно найти элемент, содержащий все эти классы, то есть вам нужно удалить пробелы. Если вы хотите узнать больше о селекторах, это может быть хорошим началом.

Короче говоря, замена $('.ui .tab .segment').transition('slide down'); с $('.ui.tab.segment').transition('slide down'); заставит это работать... ну вроде. Он по-прежнему не будет выполнять то, что вы хотите, поскольку во время события щелчка вкладка уже отображается, а метод перехода просто скрывает ее.

Для того, чтобы делать то, что вы хотите, вам необходимо:

1. Скрыть отображаемую вкладку, так как это уже произошло к тому времени, когда jQuery вызывает событие click.
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;
         }
     });
 });

Примечание: я использовал событие onVisible пользовательского интерфейса Semantic вместо события click - это, как правило, хорошая идея, и он обеспечивает отображение содержимого вкладки, чтобы мы могли его скрыть и анимировать.

Answer 2

Используйте этот формат <div class="ui transition transition-type in tab" data-tab="tab-name">

(ie,) <div class="ui transition scale in tab" data-tab="tab-1">

Работает нормально.