CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
krish
krish

Reputation: 1117

How to disable bootstrap tabs

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-toggleto enable and disable tabs here?

Upvotes: 0

Views: 5032

Answers (3)

Vinoth
Vinoth

Reputation: 1103

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.

Upvotes: 2

Varun
Varun

Reputation: 1946

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

Upvotes: 1

gavgrif
gavgrif

Reputation: 15509

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

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

Upvotes: 3

Related Questions