web-dev-qa-db-ja.com

TwitterでナビゲーションタブをトリガーするボタンBootstrap

このボタンは、コンテンツをロードするために次のタブをトリガーしますが、タブ自体は切り替わりません。最初のタブに残ります。

_<br><a class="btn btn-primary" href="#tab2" data-toggle="tab">Review</a><br>
_

Navnav-tabsのコードは次のとおりです。

_  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
  </ul>
_

任意の解決策タブとコンテンツの両方を切り替えるため IS感謝

..おそらく、ボタンを変更して* bootstrap-tab.jsv2.3.1のnext()関数をトリガーする方法：

_  , activate: function ( element, container, callback) {
      var $active = container.find('> .active')
        , transition = callback
            && $.support.transition
            && $active.hasClass('fade')

      function next() {
        $active
          .removeClass('active')
          .find('> .dropdown-menu > .active')
          .removeClass('active')

        element.addClass('active')

        if (transition) {
          element[0].offsetWidth // reflow for transition
          element.addClass('in')
        } else {
          element.removeClass('fade')
        }

        if ( element.parent('.dropdown-menu') ) {
          element.closest('li.dropdown').addClass('active')
        }

        callback && callback()
      }

      transition ?
        $active.one($.support.transition.end, next) :
        next()

      $active.removeClass('in')
    }
  }
_
javascriptbuttontwitter-bootstraptabsnav
9
sourcingsynergy

JQueryを使用して、レビューボタンにクリックハンドラーを割り当てることができます。

JS：

$('#btnReview').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

HTML：

<a class="btn btn-primary" href="#" id="btnReview">Review</a>

作業デモ

30
Zim

トリガーリンクの「data-toggle」を「data-trigger」に変更することにより、次のコードは、同様のマークアップを持つすべてのトリガーに対して、同じHREF属性を持つ任意のタブをトリガーできます。

（N.B.セレクターは最適化されていません。これは、より柔軟なソリューションへのガイドにすぎません）

JS：

$( '[data-trigger="tab"]' ).click( function( e ) {
    var href = $( this ).attr( 'href' );
    e.preventDefault();
    $( '[data-toggle="tab"][href="' + href + '"]' ).trigger( 'click' );
} );

HTML：

<a class="btn btn-primary" href="#tab2" data-trigger="tab">Review</a>
8
Alex

Bootstrap 4＆JQueryを使用すると、非常に簡単です。私はこのソリューションを使用しています。

 $(document).ready(function(){
        activaTab('aaa');
    });

    function activaTab(tab){
        $('.tab-pane a[href="#' + tab + '"]').tab('show');
    };
0
LeMeme

Bootstrap 4を使用する

var nextTab;    
    $('.nav-link').map(function(element) {
                    if($(this).hasClass("active")) {
                        nextTab = $(this).parent().next('li');
                    }
                })

    nextTab.find('a').trigger('click');
0
Novice_JS