jquery - 如何禁用选项卡标题并通过 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>

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

这是 fiddle 手链接: 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/