Respostas:
Você pode remover o data-toggle="tab"
atributo da guia, pois está conectado usando eventos ao vivo / delegar
class="disabled"
funciona como esperado #.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
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;
}
});
disabled
classe para o li
elemento e, em seguida, adicione o javascript especificada, exceto a condição de que você estaria verificando contra seria: if ($(this).parent().hasClass('disabled')) {..}
.
li
é isso que altera o visual para o usuário e, consequentemente, é o que deve ter a disabled
classe.
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
.nav-tabs li.disabled a {
pointer-events: none;
}
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:
disabled
classe à li que eu quero desativarAdicione 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 a
impede 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 à disabled
classe li
e removendo o href
atributo 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;"
à a
tag.
<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>
"cursor:no-drop;"
apenas faz o cursor parecer desabilitado, mas é clicável , o URL é anexado ao destino href por expage.apsx#Home
"disabled"
classe a <li>
E removerhref
Você pode desativar uma guia no bootstrap 4 adicionando classe disabled
ao 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:
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);