禁用引导选项卡单击

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");;        
    })
}

如果您有多个选项卡,设置class="disabled"并data-toggle=""为您要停用的所有锂项目.

Answer 2

尝试这个来禁用选项卡

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

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

Answer 3

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

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

您只需拦截click事件，然后终止该事件即可。为了显示选项卡，我只需要使用$（tab.content）.fadeIn（）;即可。