如何禁用引导选项卡

Question

I have this nav tab

<ul class="nav nav-tabs" id="pointerTabs">
    <li class="active aa"><a data-toggle="tab" href="#aa">01 Personal</a></li>
    <li class="bb" ><a data-toggle="tab" href="#bb">02 Education</a></li>
    <li class="cc"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
    <li class="dd"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>

on page load am trying to disable all tabs except first tab.So tried adding property

$('.bb,.cc,.dd').prop('disabled','true');

But Its not working.

How to disable it?any help?How can I use data-toggle to enable and disable tabs here?

Answer 1

You can use pointer-events:none on all but the first li

.nav.nav-tabs li:not(:first-of-type) a {
  pointer-events:none;
}

Answer 2

you can add this css in you li tag

class="disabledTab"

    .disabledTab{
    pointer-events: none;
}

in you html

<ul class="nav nav-tabs" id="pointerTabs">
    <li class="active aa disabledTab"><a data-toggle="tab" href="#aa">01 Personal</a></li>
    <li class="bb disabledTab" ><a data-toggle="tab" href="#bb">02 Education</a></li>
    <li class="cc disabledTab"><a data-toggle="tab" href="#cc" >03 Experience</a></li>
    <li class="dd disabledTab"><a data-toggle="tab" href="#dd">04 Family</a></li>
</ul>

add disabledtab css in your tab which you want to disabled.

Answer 3

You could use jQuery and remove the data-toggle and href attribute, and each time manipulate them on certain events.

Also, if all except one are to be disabled on page load, add a common class to all those that are to be disabled and then use the CSS property pointer-events For eg :

.disable
{
    pointer-events: none;
}