1

タブ付きレイアウトでトランジションを使用しようとしています。

私は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>

誰でも私を助けてくれますか？

4

2 に答える 2

4

何も起こらない理由は、セレクターが間違っているためです。つまり、クラスuiを持つ要素内にクラスタブを持つ要素内にクラスセグメント.ui .tab .segmentを持つ要素を探していることを意味します。代わりに、これらすべてのクラスを持つ要素を探す必要があります。つまり、スペースを削除する必要があります。セレクターについて詳しく知りたい場合は、ここから始めるのがよいでしょう。

要するに、に置き換える$('.ui .tab .segment').transition('slide down');と機能し$('.ui.tab.segment').transition('slide down');ます...まあ、まあまあです。クリックイベントが発生した時点で、タブはすでに表示されており、トランジションメソッドは単にそれを非表示にするだけなので、それはまだあなたが望むことをしません.

あなたが望むことをするために、あなたはする必要があります：

  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;
         }
     });
 });

注:クリック イベントの代わりにセマンティック UI の onVisible イベントを使用しました。これは一般的に良い考えであり、タブのコンテンツが確実に表示されるようにして、非表示にしてアニメーション化できるようにします。

于 2015-08-08T17:23:17.613 に答える