Você pode desativar as guias no Bootstrap?

Você pode desativar as guias no Bootstrap 2.0 como pode desativar os botões?

Você pode remover o data-toggle="tab"atributo da guia, pois está conectado usando eventos ao vivo / delegar

A partir da versão 2.1, na documentação do bootstrap em http://twitter.github.com/bootstrap/components.html#navs , você pode.

Estado desativado

Para qualquer componente de navegação (guias, pílulas ou lista), adicione .disabled para links em cinza e sem efeitos de foco. Os links permanecerão clicáveis, no entanto, a menos que você remova o atributo href. Como alternativa, você pode implementar JavaScript personalizado para impedir esses cliques.

Consulte https://github.com/twitter/bootstrap/issues/2764 para obter a discussão sobre adição de recursos.

Adicionei o seguinte Javascript para impedir cliques em links desabilitados:

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});

Eu acho que a melhor solução é desabilitar com css. Você define uma nova classe e desativa os eventos do mouse nela:

.disabledTab{
    pointer-events: none;
}

E então você atribui essa classe ao elemento li desejado:

<li class="disabled disabledTab"><a href="#"> .... </a></li>

Você pode adicionar / remover a classe com o jQuery também. Por exemplo, para desativar todas as guias:

$("ul.nav li").removeClass('active').addClass('disabledTab');

Aqui está um exemplo: jsFiddle

Não é necessário nenhum Jquery, apenas uma linha CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}

Além disso, estou usando a seguinte solução:

$('a[data-toggle="tab"]').on('click', function(){
  if ($(this).parent('li').hasClass('disabled')) {
    return false;
  };
});

Agora, você apenas adicionando a classe 'disabled' à li e à guia pai não funciona e fica cinza.

Pergunta antiga, mas meio que me apontou na direção certa. O método que eu segui foi adicionar a classe desativada ao li e, em seguida, adicionei o seguinte código ao meu arquivo Javascript.

$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
    e.stopImmediatePropagation();
});

Isso desativará qualquer link em que o li tenha uma classe de desativado. É semelhante à resposta de totas, mas não será executado sempre que um usuário clicar em qualquer link de guia e não usar return false.

Espero que seja útil para alguém!

Para meu uso, a melhor solução foi uma mistura de algumas das respostas aqui, que são:

• Adicionando a disabledclasse à li que eu quero desativar

• Adicione este pedaço de JS:

     `$(".nav .disabled>a").on("click", function(e) {
          e.preventDefault();
          return false;
      });`

• Você pode até remover o atributo data-toggle = "tab" se desejar que o Bootstrap não interfira no seu código.

**** NOTA **: ** O código JS aqui é importante, mesmo que você remova a alternância de dados, caso contrário, ele atualizará seu URL adicionando o #your-id valor a ele, o que não é recomendado porque sua guia está desativada, portanto, não deve ser acessado.

Com apenas css , você pode definir duas classes de css.

<style type="text/css">
    /* 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 > a[data-toggle="tab"] {
        pointer-events: none;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }
</style>

Este é um modelo html. A única coisa necessária é definir a classe para o seu item de lista preferido.

<ul class="nav nav-tabs tab-header">
    <li>
        <a href="#tab-info" data-toggle="tab">Info</a>
    </li>
    <li class="disabledTab">
        <a href="#tab-date" data-toggle="tab">Date</a>
    </li>
    <li>
        <a href="#tab-photo" data-toggle="tab">Photo</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab-info">Info</div>
    <div class="tab-pane active" id="tab-date">Date</div>
    <div class="tab-pane active" id="tab-photo">Photo</div>
</div>

Suponha, este é o seu TAB e você deseja desativá-lo

<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>

Portanto, você também pode desativar esta guia adicionando css dinâmico

$('#groups').css('pointer-events', 'none')

Além da resposta de James:

Se você precisar desativar o link, use

$('a[data-toggle="tab"]').addClass('disabled');

Se você precisar impedir que um link desativado carregue a guia

$('a[data-toggle="tab"]').click(function(e){

            if($this.hasClass("disabled")){

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Se você precisar impossibilitar o link

$('a[data-toggle="tab"]').removeClass('disabled');

Eu tentei todas as respostas sugeridas, mas finalmente eu fiz funcionar assim

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

Nenhuma das respostas funciona para mim. Remover data-toggle="tab"do aimpede que a guia seja ativada, mas também adiciona o#tabId hash ao URL. Isso é inaceitável para mim. O que também é inaceitável é usar javascript.

O que funciona é adicionado à disabledclasse lie removendo o hrefatributo de sua contenção a.

minhas guias estavam em painéis, então eu adicionei uma classe = 'desativada' à âncora das guias

em javascript eu adicionei:

$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if ($(this).hasClass('disabled')){
        e.preventDefault();
        return false;
    }
})

e para apresentação em menos eu adicionei:

.panel-heading{
    display:table;
    width:100%;
    padding-bottom:10px;
    ul.nav-tabs{
        display:table-cell;
        vertical-align:bottom;
        a.disabled{
            .text-muted;
            cursor:default;
            &:hover{
                background-color:transparent;
                border:none;
            }
        }
    }
}

A solução mais fácil e limpa para evitar isso é adicionar onclick="return false;"à atag.

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#home" onclick="return false;">Home</a>
    </li>    
    <li>
        <a href="#ApprovalDetails" onclick="return false;">Approval Details</a>
    </li>
</ul>

• A adição "cursor:no-drop;"apenas faz o cursor parecer desabilitado, mas é clicável , o URL é anexado ao destino href por expage.apsx#Home
• Não há necessidade de adicionar "disabled"classe a <li>E removerhref

Você pode desativar uma guia no bootstrap 4 adicionando classe disabledao filho do item de navegação da seguinte maneira

<li class="nav-item">
    <a class="nav-link disabled" data-toggle="tab" href="#messages7" role="tab" aria-expanded="false">
        <i class="icofont icofont-ui-message"></i>Home</a>
    <div class="slide"></div>
</li>

Aqui está a minha tentativa. Para desativar uma guia:

1. Adicione a classe "disabled" à LI da guia;
2. Remova o atributo 'alternância de dados' de LI> A;
3. Suprimir o evento 'clique' em LI> A.

Código:

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