twitter-bootstrap 更改活动类以及导航药丸中的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21659329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the active class as well as content in nav pills
提问by Jamie Romeo
Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
基本上我试图通过引导程序创建一个“向导”，当单击“继续”按钮时，活动选项卡会发生变化。我设法想出了以下代码：
<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>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too). However when I click the individual continue button the content changes but the active nav pill does not change.
现在，当我单击导航药丸本身时它可以正常工作（内容发生变化并且活动药丸也发生变化）。但是，当我单击个人继续按钮时，内容会发生变化，但活动导航药丸不会发生变化。
Why doesn't the active class change like when I click the pill itself?
为什么活动类不会像我单击药丸本身那样改变？
Here's a jsFiddle with the code: http://jsfiddle.net/MvY4x/5/
这是一个带有代码的 jsFiddle：http: //jsfiddle.net/MvY4x/5/
采纳答案by Zim
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
您可以使用 jQuery 激活下一个选项卡及其内容。给你所有的继续按钮一个像“继续”这样的类，然后你可以做这样的事情..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
Bootply 上的演示：http://bootply.com/112163
回答by Jason Carpenter
Just found this much more elegant solution...
刚刚找到了这个更优雅的解决方案......
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
来自：http: //info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
回答by Snowburnt
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
您可以将 Id 添加到药丸（step1tab 等），然后使函数成为这样的函数：
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
并将其添加到文本的锚标记中：
onClick="switchPill(2,3)"
回答by redaxmedia
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
我黑了这个小提琴：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');
});
Really a bad ass hack, needs improvement but may give an idea...
真的是一个糟糕的黑客，需要改进，但可能会给出一个想法......
