Can you disable tabs in Bootstrap

Question

Can you disable tabs in Bootstrap 2 0 like you can disable buttons

User · Answer

As of 2 1  from bootstrap documentation at http   twitter github com bootstrap components html navs  you can      Disabled state      For any nav component  tabs  pills  or list   add  disabled for gray   links and no hover effects  Links will remain clickable  however    unless you remove the href attribute  Alternatively  you could   implement custom JavaScript to prevent those clicks    See https   github com twitter bootstrap issues 2764 for the feature add discussion

User · Answer

With only css  you can define two css classes    lt style type  text css  gt         Over the pointer-events none  set the cursor to not-allowed      On this way you will have a more user friendly cursor          disabledTab           cursor  not-allowed               Clicks are not permitted and change the opacity         li disabledTab  gt  a data-toggle  tab             pointer-events  none          filter  alpha opacity 65           -webkit-box-shadow  none          box-shadow  none          opacity   65         lt  style gt    This is an html template  The only thing needed is to set the class to your preferred list item    lt ul class  nav nav-tabs tab-header  gt       lt li gt           lt a href   tab-info  data-toggle  tab  gt Info lt  a gt       lt  li gt       lt li class  disabledTab  gt           lt a href   tab-date  data-toggle  tab  gt Date lt  a gt       lt  li gt       lt li gt           lt a href   tab-photo  data-toggle  tab  gt Photo lt  a gt       lt  li gt   lt  ul gt   lt div class  tab-content  gt       lt div class  tab-pane active  id  tab-info  gt Info lt  div gt       lt div class  tab-pane active  id  tab-date  gt Date lt  div gt       lt div class  tab-pane active  id  tab-photo  gt Photo lt  div gt   lt  div gt

User · Answer

You can disable a tab in bootstrap 4 by adding class disabled to the child of nav-item as follows   lt li class  nav-item  gt       lt a class  nav-link disabled  data-toggle  tab  href   messages7  role  tab  aria-expanded  false  gt           lt i class  icofont icofont-ui-message  gt  lt  i gt Home lt  a gt       lt div class  slide  gt  lt  div gt   lt  li gt

User · Answer

i think the best solution is disabling with css  You define a new class and you turn off the mouse events on it    disabledTab      pointer-events  none      And then you assign this class to the desired li element    lt li class  disabled disabledTab  gt  lt a href     gt        lt  a gt  lt  li gt    You can add remove the class with jQuery also  For example  to disable all tabs      ul nav li   removeClass  active   addClass  disabledTab      Here is an example  jsFiddle

User · Answer

I tried all suggested answers  but finally i made it work like this  if  false    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

User · Answer

No Need Any Jquery  Just One Line CSS  nav-tabs li disabled a       pointer-events  none

User · Answer

Old question but it kind of pointed me in the right direction  The method I went for was to add the disabled class to the li and then added the following code to my Javascript file       nav-tabs li disabled  gt  a data-toggle tab    on  click   function e        e stopImmediatePropagation          This will disable any link where the li has a class of disabled  Kind of similar to totas s answer but it won t run the if every time a user clicks any tab link and it doesn t use return false   Hopefully it ll be useful to someone

User · Answer

Here s my attempt  To disable a tab    Add  disabled  class to tab s LI  Remove  data-toggle  attribute from LI   A  Suppress  click  event on LI   A    Code   var toggleTabs   function state        disabledTabs      tab2     tab3          each disabledTabs    proxy function idx  tabSelector            tab     tabSelector           if  tab length                if  state                       Enable tab click                    tab  toggleClass  disabled   false                      a   tab  attr  data-toggle    tab   off  click                  else                      Disable tab click                    tab  toggleClass  disabled   true                      a   tab  removeAttr  data-toggle   on  click   function e                       e preventDefault                                                       this        toggleTabs call myTabContainer  true

User · Answer

I added the following Javascript to prevent clicks on disabled links       nav-tabs a data-toggle tab    on  click   function e      if    this  hasClass  disabled          e preventDefault        return false

User · Answer

None of the answers work for me   Remove data-toggle  tab  from the a prevents the tab from activating  but it also adds the  tabId hash to the URL  That is unacceptable to me   What is also unacceptable is using javascript   What does work is added the disabled class to the li and removing the href attribute of its containing a

User · Answer

Most easy and clean solution to avoid this is adding  onclick  return false   to a tag    lt ul class  nav nav-tabs  gt       lt li class  active  gt           lt a href   home  onclick  return false   gt Home lt  a gt       lt  li gt           lt li gt           lt a href   ApprovalDetails  onclick  return false   gt Approval Details lt  a gt       lt  li gt   lt  ul gt     Adding  cursor no-drop   just makes cursor look disabled  but is clickable  Url gets appending with href target for ex page apsx Home No need of adding  disabled  class to  lt li gt  AND removing href

User · Answer

Also  I m using following solution      a data-toggle  tab     on  click   function      if    this  parent  li   hasClass  disabled          return false             Now you just adding class  disabled  to the parent li and tab doesn t work and become gray

User · Answer

Suppose  this is your TAB and you want to disable it   lt li class    id  groups  gt  lt a data-toggle  tab  class  navuserli  href   groups  aria-expanded  false  gt Groups lt  a gt  lt  li gt    So you can also disable this tab by adding dynamic css       groups   css  pointer-events    none

User · Answer

my tabs were in panels  so i added a class  disabled  to the tabs anchor  in javascript i added     selector     a data-toggle  tab     on  show bs tab   function  e        if    this  hasClass  disabled             e preventDefault            return false             and for presentation in less i added    panel-heading      display table      width 100       padding-bottom 10px      ul nav-tabs          display table-cell          vertical-align bottom          a disabled               text-muted              cursor default               amp  hover                  background-color transparent                  border none

User · Answer

In addition to James s answer   If you need to disable the link use     a data-toggle  tab     addClass  disabled      If you need to prevent a disabled link from loading the tab     a data-toggle  tab     click function e                if  this hasClass  disabled                      e preventDefault                     e stopPropagation                     e stopImmediatePropagation                     return false                     If you need to unable the link     a data-toggle  tab     removeClass  disabled

User · Answer

For my use  the best solution was a mix of some of the answers here  which are    Adding the disabled class to the li I want to disable Add this piece of JS       quot  nav  disabled gt a quot   on  quot click quot   function e        e preventDefault        return false        You can even remove the data-toggle  quot tab quot  attribute if you want Bootstrap to not interfer at all with your code   NOTE  The JS code here is important  even if you remove the data-toggle because otherwise  it will update your URL by adding the  your-id value to it  which is not recommended because your tab is disabled  thus should not be accessed

User · Answer

You could remove the data-toggle  tab  attribute from the tab as it s hooked up using live delegate events

[javascript] Can you disable tabs in Bootstrap?

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-2