如何禁用Tabs标题并在bootstrap中导航按钮

Question

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

<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>

我已经浏览了一些链接，告诉我们删除数据切换=＆＃34;标签＆＃34;，但是如果我将其删除，我也无法浏览按钮。

这是fiddler链接： https://jsfiddle.net/ngvheehb/

Answer 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/