更改选项卡后从链接禁用引导打开选项卡

Posted

技术标签:

【中文标题】更改选项卡后从链接禁用引导打开选项卡【英文标题】：Disabling bootstrap open tab from link after tab changing 【发布时间】：2018-08-11 22:30:41 【问题描述】：

我一直在努力禁止父类 li 打开带有链接的选项卡，我只想要保存和继续按钮来打开选项卡而不是链接，因为在选项卡中更改后链接无法禁用。以前的标签被禁用，请问我该如何解决这个问题。只有保存和继续按钮应该移动并返回选项卡

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



    //The js tab script           
    <script>
    $(document).ready(function () 
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();

    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) 

    var $target = $(e.target);

    if ($target.parent().hasClass('disabled')) 
    return false;
    
    );

    $(".next-step").click(function (e) 

    var $active = $('.wizard .nav-tabs li.active');
    $active.next().removeClass('disabled');
    nextTab($active);

    var current_tab = e.target; //GOT CURRENT TAB
    var previous_tab = e.relatedTarget; //GOT PREVIOUS TAB

    $previous_tab.parent().addClass('disabled'); //WHAT I TRIED

    );


$(".prev-step").click(function (e) 

var $active = $('.wizard .nav-tabs li.active');
prevTab($active);

);
);

function nextTab(elem) 
$(elem).next().find('a[data-toggle="tab"]').click();

function prevTab(elem) 
$(elem).prev().find('a[data-toggle="tab"]').click();

</script>

【问题讨论】：

【参考方案1】：

我建议在您的链接上设置自定义点击事件。拥有 data-toggle='tab' 和 role='tab' 表明 Bootstrap 您正在寻找基于这些链接切换选项卡。因此，我不会在“选项卡显示事件”上注册您的侦听器，而是这样做：

$("data-toggle='tab'").on("click", function(e) 
    return $(this).closest("li").hasClass("active");
);

然后，对父级“非活动”的链接的任何点击都将无效。

【讨论】：

【参考方案2】：

正如@P.Lalonde 建议的那样，您可以使用切换选项卡来激活和停用链接。

$("data-toggle='tab'").on("click", function(e) 
  return $(this).closest("li").hasClass("active");
  );

【讨论】：

【参考方案3】：

这是经过几天的尝试后解决的问题。

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

【讨论】：

以上是关于更改选项卡后从链接禁用引导打开选项卡的主要内容，如果未能解决你的问题，请参考以下文章

html 从链接打开/更改引导选项卡

创建 Honeycomb 操作栏选项卡后更改选项卡文本

关闭 Azure 数据流选项卡后自动取消选择链接服务

在选项卡式应用程序中更改选项卡后运动功能不起作用

单击选项卡后，相机/相册不会在 ios 上重新加载

仅在键盘选项卡后获取焦点元素