按钮，触发导航，标签与Twitter引导 [英] Button to Trigger Nav-Tab with Twitter Bootstrap

问题描述

此按钮会触发下一个标签加载内容，但本身不切换选项卡，它仍是一个选项卡上。

 ＆LT; BR＆GT;＆LT;一类=BTN BTN-初级的href =＃TAB2数据切换=标签＆GT;综述＆LT; / A＆GT;＆LT; BR＆GT ;
 

下面是code的净值资产净值的选项卡：

 ＆LT; UL类=净值资产净值的选项卡＆GT;
    ＆LT;李班=主动＆GT;＆LT; A HREF =＃TAB1数据切换=标签＆GT;送货＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃TAB2数据切换=标签＆GT;数量及LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃TAB3数据切换=标签＆GT;总结＆LT; / A＆GT;＆LT; /李＆GT;
  ＆LT; / UL＆GT;
 

任何解决方案的的切换，标签和放大器;含量的IS AP preCIATED

..也许是一种方法来改变按钮触发在*引导-tab.js V2.3.1的next（）功能：

 ，激活：功能（元素，集装箱，回调）{
      变量$激活= container.find（'＆GT;。主动'）
        过渡=回调
            ＆功放;＆安培; $ .support.transition
            ＆功放;＆安培; $ active.hasClass（'褪色'）      接下来的功能（）{
        $活跃
          .removeClass（激活）
          .find（'＆GT; .dropdown-菜单＆gt;。主动'）
          .removeClass（激活）        element.addClass（激活）        如果（过渡）{
          元素[0] .offsetWidth //回流过渡
          element.addClass（IN）
        }其他{
          element.removeClass（'褪色'）
        }        如果（element.parent（'下拉菜单'））{
          element.closest（'li.dropdown'）。addClass（激活）
        }        回调和放大器;＆安培;回电话（）
      }      过渡 ？
        $ active.one（$ support.transition.end，下一个）：
        下一个（）      $ active.removeClass（IN）
    }
  }
 

解决方案

您可以指定您的评论按钮使用点击处理程序的jQuery ...

JS：

  $（'＃btnReview'）。点击（函数（）{
  $（'导航的选项卡＆GT;。主动'）。接下来（礼）找到（'A'）的触发器（点击）。
}）;
 

HTML

 ＆LT;一类=BTN BTN-初级的href =＃ID =btnReview＆GT;回顾与LT; / A＆GT;
 

工作演示

This button triggers the next tab to load content, but the tab itself does not switch, it remains on the first tab..

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

Here is the code for 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>

ANY SOLUTION for switching both the tab&content IS APPRECIATED

..perhaps a way to change the button to trigger the next() function in * bootstrap-tab.js v2.3.1:

  , 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')
    }
  }

解决方案

You could assign your Review button a click handler using 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

这篇关于按钮，触发导航，标签与Twitter引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！