禁用引导选项卡单击 [英] Disable bootstrap tab clicks

问题描述

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

I am using bootsrap tabs for a registration form , I changed navigation of tabs using onclick event of next and previous button . But still that tabs click works and being able to go the desired page easily Please help how can i stop tab click navigation i only want next previous button navigation Please find the html code below

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

推荐答案

我在HTML中使用这样的选项卡(使用Bootstrap 3.0):

I have tabs like this in the HTML (using 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文件中:

In my JavaScript file:

 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="".

If you are having multiple tabs, set class="disabled" and data-toggle="" for all the li items that you want to deactivate.

这篇关于禁用引导选项卡单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！