使用 Twitter Bootstrap 触发导航选项卡的按钮

Posted 2023-02-22

【中文标题】使用 Twitter Bootstrap 触发导航选项卡的按钮

【英文标题】：Button to Trigger Nav-Tab with Twitter Bootstrap

【发布时间】：2013-05-03 23:42:35

【问题描述】：

这个按钮触发下一个标签页加载内容，但是标签页本身并没有切换，它仍然在第一个标签页上..

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

这里是 nav nav-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>

任何解决方案用于切换标签和内容都值得赞赏

..也许是在bootstrap-tab.js v2.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')
    
  

【参考方案1】：

您可以使用 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>

Working Demo

【讨论】：

这不是一个优雅的纯标记解决方案。绝对需要在引导程序中进行修复。

【参考方案2】：

通过将触发链接的“data-toggle”更改为“data-trigger”，以下代码可以触发具有相同 HREF 属性的任何选项卡，用于所有具有相似标记的触发器。

（注意，选择器没有优化，它只是一个更灵活解决方案的指南）

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>

【参考方案3】：

使用 Bootstrap 4

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

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

【参考方案4】：

使用 Bootstrap 4 和 JQuery 非常简单， 我正在使用这个解决方案：

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

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

【参考方案5】：

你可以用jquery；

JS：

function change_tab(tab_id)

   $(".nav-link").attr("class","nav-link");//clear classes
   $(".tab-pane").attr("class","tab-pane fade");//clear classes

   var tab_content = "#"+tab_id;
   var tab = "#"+tab_id+"-tab";
   $(tab).attr("class","nav-link active show");
   $(tab_content).attr("class"," tab-pane fade active show");

HTML：

<a class="btn btn-primary" onclick="change_tab('tabid')">Review</a>