禁用引导选项卡点击

Question

我正在使用 bootsrap 选项卡作为注册表单， 我使用下一个和上一个按钮的 onclick 事件更改了选项卡的导航。 但选项卡单击仍然有效，并且能够轻松转到所需页面请帮助我如何停止选项卡单击导航我只想要下一个上一个按钮导航 请找到下面的html代码

 <ul class="nav nav-tabs" id="myTab">
   <li class="active">
     <a href="#home" data-toggle="tab">1.PERSONAL DETAILS</a> 
   </li>   
   <li>
     <a href="#profile" data-toggle="tab"> 2. CONTACT DETAILS</a> 
   </li>  
   <li>
     <a href="#messages" data-toggle="tab">3. EDUCATION DETAILS</a>
   </li>   
   <li>
     <a href="#course" data-toggle="tab">4. SELECT COURSE</a>
   </li>   
   <li>
     <a href="#settings" data-toggle="tab">5. PAYMENT DETAILS</a>
   </li> 
 </ul>
 <div class="tab-content">
    <div class="tab-pane active" id="home">Form elements </div>
    <div id="profile">Form elements </div>
    <div id="messages">Form elements </div>
    <div id="settings">Form elements </div>
 </div>

Answer 1

我在 HTML 中有这样的选项卡（使用 Bootstrap 3.0）：

<ul class="nav nav-tabs" id="createNotTab">
    <li class="active" ><a href="#home" data-toggle="tab">Step 1: Select Property</a></li>
    <li class="disabled"><a href="#createnotification" data-toggle="" >Step 2: Create Notification</a></li>
</ul>

下一个/上一个按钮

<button class="btn btn-warning prevtab" type="button" onclick="return showPrev()"><span class="glyphicon glyphicon-arrow-left"></span>Previous </button>
 <button class="btn btn-info prevtab" type="button" onclick="return showNext()"><span class="glyphicon glyphicon-arrow-right"></span>Next </button>

在我的 JavaScript 文件中：

 var $tabs = $('#createNotTab li');


function showPrev() {
    $tabs.filter('.active').prev('li').removeClass("disabled");
    $tabs.filter('.active').prev('li').find('a[data-toggle]').each(function () {
       $(this).attr("data-toggle", "tab");
    });

    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');

    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').each(function () {
        $(this).attr("data-toggle", "").parent('li').addClass("disabled");        
    })
}

function showNext() {
    $tabs.filter('.active').next('li').removeClass("disabled");
    $tabs.filter('.active').next('li').find('a[data-toggle]').each(function () {
        $(this).attr("data-toggle", "tab");
    });

    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');

    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').each(function () {
        $(this).attr("data-toggle", "").parent('li').addClass("disabled");;        
    })
}

如果您有多个选项卡，请为您要停用的所有 li 项目设置

class="disabled"

和

data-toggle=""

。

Answer 2

我遇到了同样的问题，这就是我使用的。

$("element").click(event) {
    event.stopImmediatePropagation();
}

你只需拦截点击事件，然后杀死该事件。要显示选项卡，我只需使用 $(tab.content).fadeIn();

Answer 3

尝试禁用选项卡

$('#tab').attr('class', 'disabled');

    $('tab').click(function(event){
        if ($(this).hasClass('disabled')) {
            return false;
        }
    });

Answer 4

超级简单...

将禁用类添加到选项卡 li。

在附加到 [data-toggle='tab'] 元素的 show.bs.tab 事件上 
检查它的父级是否有禁用类...

如果是这样返回 false...

Answer 5

$(document).ready(function(){
    $("#tabs > li").click(function(){
        if($(this).hasClass("disabled"))
            return false;
    });
});

工作就足够了

Answer 6

我用过

style="pointer-events: none;"

类似：

<div class="steps nav" role="tablist">
    <div href="#first" data-toggle="tab" role="tab" class="step mb-4 active" style="pointer-events: none;">
        <div class="number">1</div>
        first
    </div>
    <div href="#second" data-toggle="tab" role="tab" class="step mb-4" style="pointer-events: none;">
        <div class="number">2</div>
        second
    </div>
</div>

似乎正在发挥作用。仍然能够使用 .click() 函数执行导航。这是大多数人正在寻找的。

类似的东西

$('.nav [href="' + target + '"]').click()

编码快乐！

Answer 7

使用以下代码禁用用户单击选项卡：

$('li:has([data-toggle="tab"])').click(function(event){return false;});

确保此代码将添加到您的 bootsrtap js 之后

Answer 8

我有一段时间遇到这个问题了。

删除

data-toggle

通过 Javascript 有条件地执行

在

<a>

标签中提供选项卡ID

document.getElementById(tabId)[0].setAttribute("data-toggle", "");

Answer 9

我尝试了所有建议的答案，但最后我让它像这样工作

if (AnyCondition) //your condition
{
    $("a[data-toggle='tab'").prop('disabled', true);
    $("a[data-toggle='tab'").each(function () {
        $(this).prop('data-href', $(this).attr('href')); // hold you original href
        $(this).attr('href', '#'); // clear href
    });                
    $("a[data-toggle='tab'").addClass('disabled-link');
}
else
{
    $("a[data-toggle='tab'").prop('disabled', false);
    $("a[data-toggle='tab'").each(function () {
        $(this).attr('href', $(this).prop('data-href')); // restore original href
    });
    $("a[data-toggle='tab'").removeClass('disabled-link');
}
// if you want to show extra messages that the tab is disabled for a reason
$("a[data-toggle='tab'").click(function(){
   alert('Tab is disabled for a reason');
});