Question

基本上我正在尝试通过bootstrap创建一个“向导”，当单击“继续”按钮时，活动选项卡会发生变化。我设法提出以下代码：

<div id="rootwizard">
   <div class="navbar">
      <div class="navbar-inner">
         <div class="container">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab">Step 3</a></li>
            </ul>
         </div>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane" id="step1">
         <a class="btn" href="#step2" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step2">
         Step 2
         <a class="btn" href="#step3" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step3">
         Step 3
      </div>
   </div>
</div>

现在，当我点击导航丸本身（内容变化和活性药丸也发生变化）时，它工作正常。但是，当我单击单个继续按钮时，内容会更改但活动导航丸不会更改。

为什么活动类不会像点击药丸本身那样改变？

这是一个代码的jsFiddle： http://jsfiddle.net/MvY4x/5/

Answer 1

刚刚找到了这个更优雅的解决方案......

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

来自：http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/

Answer 2

您可以使用jQuery激活下一个标签及其内容。给你所有的继续按钮一个类似于＆＃39;继续＆＃39;然后你可以做这样的事情..

$('.continue').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

})

Bootply上的演示：http://bootply.com/112163

Answer 3

你可以将Ids添加到药丸（step1tab等），然后使函数成为这样的函数：

function switchPill(a,b){
    $("#step"+a+"tab").removeClass("active");
    $("#step"+b+"tab").addClass("active");
}

并将其添加到文本的锚标记中：

onClick="switchPill(2,3)"

Answer 4

我砍掉了这个小提琴：http://jsfiddle.net/MvY4x/7/

$('div.tab-content a[data-toggle]').on('click', function ()
{
    var that = $(this),
        link = that.attr('href');

    $('a[href="' + link + '"]').not(that).trigger('click');
});

真是一个糟糕的屁股黑客，需要改进但可能会提出一个想法...

更改活动类以及导航丸中的内容

4 个答案: