我一直在努力禁用父类li打开带有链接的选项卡,我只想保存并继续按钮打开选项卡而不是链接,导致链接在选项卡中更改后无法使用。之前的标签被禁用,请问我该如何解决这个问题。只有保存和继续按钮才能移动并返回到TAB
LoanID Married ApplicantIncome CoapplicantIncome Credit_History
LP00135 NaN 33460 16000 1.0
LP00234 Yes 55000 70000 1.0
LP00432 No 12000 0 0.0
答案 0 :(得分:2)
我建议您在链接上进行自定义点击事件。使用data-toggle ='tab'和role ='tab'表示您正在寻找基于这些链接切换选项卡的Bootstrap。因此,我不会在“Tab显示事件”上注册您的监听器,而是执行此操作:
$("data-toggle='tab'").on("click", function(e) {
return $(this).closest("li").hasClass("active");
});
然后,任何点击父母“非活动”的链接都没有效果。
答案 1 :(得分:1)
就像@ P.Lalonde建议的那样,您可以使用切换选项卡来激活和取消激活链接。
$("data-toggle='tab'").on("click", function(e) {
return $(this).closest("li").hasClass("active");
});
答案 2 :(得分:1)
经过几天的努力,这就是过去常常解决的问题。
//Updated html
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" id="step_1">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<div class="numberCircle">1</div>
</span>
</a>
</li>
<li role="presentation" class="disabled" id="step_2">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<div class="numberCircle">2</div>
</span>
</a>
</li>
<li role="presentation" class="disabled" id="step_3">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<div class="numberCircle">3</div>
</span>
</a>
</li>
<li role="presentation" class="disabled" id="step_4">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<div class="numberCircle">4</div>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-pane active" role="tabpanel" id="step1"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and continue</button></li></div>
<div class="tab-pane" role="tabpanel" id="step2"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and Continue</button></li></div>
<div class="tab-pane" role="tabpanel" id="step3"><li><button type="button" class="prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn btn-success btn-info-full next-step" style="margin-top:-30px;">Save and Finish</button></li></div>
</div>
</div>
</div>
</div>
//updated javascript
<script>
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
var activeTab = null;
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
activeTab = e.target;
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
if($target == "#step1"){
$("#step_2").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_2").addClass('disabled');
$("#step_3").addClass('disabled');
$("#step_4").addClass('disabled');
}
else if($target == "#step2"){
$("#step_1").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_3").addClass('disabled');
$("#step_4").addClass('disabled');
}
else if($target == "#step3"){
$("#step_1").attr("disabled","disabled");
$("#step_2").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_2").addClass('disabled');
$("#step_4").addClass('disabled');
} else {
$("#step_1").attr("disabled","disabled");
$("#step_2").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_2").addClass('disabled');
$("#step_3").addClass('disabled');
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var back = $('.wizard .nav-tabs li.previous');
back.next().removeClass('disabled');
prevTab(back);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
alert(back);
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>