Você pode desativar as guias no Bootstrap?


Respostas:


188

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


11
Obrigado trabalhou um tratamento, também adicionou css "cursor: no-drop;" para cursor de modo utilização sabe por que eles não podem clicar nele
arbme

23
cursor: não permitido; é mais apropriado neste caso. A menos que você esteja realmente arrastando e soltando.
Christophe Geers

9
Ou adicionar uma classe com deficiência para o li
Pencilcheck

6
Você precisa usar as duas sugestões acima: Adicionar classe "desativado" para <li> e remover dados comutar ou atributo href de guia
Scabbia

9
Eu simplesmente adicionei este CSS e agora class="disabled"funciona como esperado #.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
1926

49

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.


1
esta é uma das principais funcionalidades e confunde-me que ainda não está implementado
DS_web_developer

É implementado na v3
Jeroen K

8
Sim, mas os links ainda podem ser clicados.
svlada

3
Exatamente, a solução viável até agora é remover o atributo de alternância de dados.
Cyril N.

34

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

9
Eu acho que uma combinação disso e a resposta do @ hotzu deve ser a resposta. Você deve adicionar a disabledclasse para o lielemento e, em seguida, adicione o javascript especificada, exceto a condição de que você estaria verificando contra seria: if ($(this).parent().hasClass('disabled')) {..}.
im1dermike

@ im1dermike Não vejo por que estaria fazendo isso?
totas

Pergunta antiga, mas foi o que encontrei, então estou adicionando isso. Você faria essa verificação, porque lié isso que altera o visual para o usuário e, consequentemente, é o que deve ter a disabledclasse.
Jared

23

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


thnx @hotzu u fez o meu dia fácil .. :)
Gaurav Singh

eu recomendaria fortemente contra isso. uma vez que uma solução somente em CSS deixa as guias clicáveis. caso haja outros eventos ouvindo esses cliques, eles serão executados, o que não é o resultado desejado. (eu acho?)
Dementic

No meu caso, isso fez o truque. Criei um formulário que consiste em várias guias. A passagem para a próxima guia é feita através de um botão, que aciona um evento de clique na guia para acessar. Portanto, desativar os cliques completamente não é uma opção para mim, mas remover os eventos do ponteiro das guias era exatamente o que eu precisava.
sebastian

17

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

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

1
Eu tive que fazer isso em li.disabled (não li.disabled a) #
Daniel Daniel

10

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.


6

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!


1
Boa! mas precisa e.preventDefault () antes de e.stopImmediatePropagation ()
meuwka

6

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.


4

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>

2

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

1

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

0

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

0

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.


Agora que eu li ainda mais para baixo, este também é basicamente a mesma resposta exata como o de @ Scott Stafford, que respondeu que 2 anos mais cedo ...
Jim

0

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

0

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

0

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>

-1

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);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.