如何禁用选项卡标题并通过引导程序中的按钮导航答案

【问题标题】：How to disable Tabs header and navigate through button in bootstrap如何禁用选项卡标题并通过引导程序中的按钮导航
【发布时间】：2015-10-28 09:05:42
【问题描述】：

我正在使用标签内容导航到不同的标签。我也可以通过按钮导航，但我想禁用通过标题导航。

<ul class="nav nav-tabs">
<li class="active"><a href="#info-tab" data-toggle="tab">Information<i class="fa"></i></a></li>
<li><a href="#receipent-tab" data-toggle="tab">Recipient <i class="fa"></i></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="row text-right">
<button type="button" class="btn btn-primary" id="btn1">Next</button>
<br />
</div>
</div>
<div class="tab-pane" id="receipent-tab">
</div>
</div>

我浏览了一些链接，这些链接告诉我删除 data-toggle="tab"，但如果我删除它，我也无法浏览按钮。

这里是提琴手链接： https://jsfiddle.net/ngvheehb/

【问题讨论】：

您想在点击“信息”和“收件人”标题时停止导航...对吧？？？
是的。没错，但它应该通过按钮导航

标签： jquery html twitter-bootstrap

【解决方案1】：

试试这个...

HTML

<ul class="nav nav-tabs">
<li class="active"><a href="#info-tab" data-toggle="tab">Information<i class="fa"></i></a></li>
<li><a href="#receipent-tab" data-toggle="tab">Recipient <i class="fa"></i></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="row text-center">
<a class="btn btn-primary" id="btn1" data-toggle="tab" href="#receipent-tab">Next</a>
<br />
</div>
</div>
<div class="tab-pane" id="receipent-tab">
    <a class="btn btn-primary" id="btn2" data-toggle="tab" href="#info-tab">Previous</a>
</div>
</div>

JQUERY

 $("#btn1").click(function () {
 $('li').removeClass('active');
 $('.nav-tabs li:nth-child(2)').addClass('active');


});

 $("#btn2").click(function () {
     $('li').removeClass('active');
     $('.nav-tabs li:nth-child(1)').addClass('active');
        });

$('.nav li a').click(function(e) {
    e.preventDefault();
    return false;
});

JSFIDDLE

https://jsfiddle.net/ravipateldhg/ngvheehb/1/

【讨论】：