¿Se pueden desactivar las pestañas en Bootstrap?

¿Puedes desactivar las pestañas en Bootstrap 2.0 como puedes desactivar los botones?

Puede eliminar el data-toggle="tab"atributo de la pestaña ya que está conectado mediante eventos en vivo / delegado

A partir de 2.1, de la documentación de bootstrap en http://twitter.github.com/bootstrap/components.html#navs , puede .

Estado deshabilitado

Para cualquier componente de navegación (pestañas, píldoras o lista), agregue .disabled para enlaces grises y sin efectos de desplazamiento. Sin embargo, los enlaces seguirán siendo seleccionables, a menos que elimine el atributo href. Alternativamente, podría implementar JavaScript personalizado para evitar esos clics.

Consulte https://github.com/twitter/bootstrap/issues/2764 para ver la función de agregar discusión.

Agregué el siguiente Javascript para evitar clics en enlaces deshabilitados:

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

Creo que la mejor solución es deshabilitar con CSS. Define una nueva clase y desactiva los eventos del mouse en ella:

.disabledTab{
    pointer-events: none;
}

Y luego asigna esta clase al elemento li deseado:

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

Puede agregar / eliminar la clase con jQuery también. Por ejemplo, para deshabilitar todas las pestañas:

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

Aquí hay un ejemplo: jsFiddle

No necesita ningún Jquery, solo una línea CSS

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

Además, estoy usando la siguiente solución:

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

Ahora solo agrega la clase 'deshabilitado' a la pestaña principal li y la pestaña no funciona y se vuelve gris.

Antigua pregunta, pero me señaló en la dirección correcta. El método que utilicé fue agregar la clase deshabilitada a la li y luego agregué el siguiente código a mi archivo Javascript.

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

Esto deshabilitará cualquier enlace donde el li tenga una clase de deshabilitado. Es similar a la respuesta de totas, pero no se ejecutará si cada vez que un usuario hace clic en un enlace de pestaña y no usa return false.

¡Ojalá sea útil para alguien!

Para mi uso, la mejor solución fue una mezcla de algunas de las respuestas aquí, que son:

• Agregar la disabledclase a la li que quiero deshabilitar

• Agregue esta pieza de JS:

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

• Incluso puede eliminar el atributo data-toggle = "tab" si desea que Bootstrap no interfiera en absoluto con su código.

**** NOTA **: ** El código JS aquí es importante, incluso si elimina la alternancia de datos porque, de lo contrario, actualizará su URL al agregarle el #your-idvalor, lo que no se recomienda porque su pestaña está deshabilitada, por lo tanto no se debe acceder.

Con solo css , puede definir dos clases 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>

Esta es una plantilla HTML. Lo único que se necesita es establecer la clase en su elemento 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>

Supongamos que esta es su TAB y desea deshabilitarla

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

Entonces también puede deshabilitar esta pestaña agregando CSS dinámico

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

Además de la respuesta de James:

Si necesita deshabilitar el enlace, use

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

Si necesita evitar que un enlace deshabilitado cargue la pestaña

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Si necesita inhabilitar el enlace

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

Intenté todas las respuestas sugeridas, pero finalmente hice que funcionara así

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

Ninguna de las respuestas funciona para mí. Eliminar data-toggle="tab"de aevita que la pestaña se active, pero también agrega#tabId hash a la URL. Eso es inaceptable para mí. Lo que también es inaceptable es usar javascript.

Lo que funciona es agregar la disabledclase liy eliminar el hrefatributo de su contenido a.

mis pestañas estaban en paneles, así que agregué una clase = 'deshabilitado' al ancla de pestañas

en javascript agregué:

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

y para presentación en menos agregué:

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

La solución más fácil y limpia para evitar esto es agregar onclick="return false;"a la aetiqueta.

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

• Agregar "cursor:no-drop;"solo hace que el cursor se vea deshabilitado, pero se puede hacer clic , Url se agrega con href target para expage.apsx#Home
• No es necesario agregar "disabled"clase a <li>Y eliminarhref

Puede deshabilitar una pestaña en bootstrap 4 agregando clase disabledal elemento secundario del elemento de navegación de la siguiente manera

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

Aquí está mi intento. Para deshabilitar una pestaña:

1. Agregue la clase "deshabilitada" al LI de la pestaña;
2. Eliminar el atributo 'data-toggle' de LI> A;
3. Suprima el evento 'clic' en 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);