¿Se pueden desactivar las pestañas en Bootstrap?

Respuestas:

188

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

Betty
fuente
11
Gracias trabajó un regalo, también agregó css "cursor: no-drop;" para el cursor de modo utilización sabe por qué no pueden hacer clic en él
arbme
23
cursor: no permitido; Es más apropiado en este caso. A menos que esté realmente arrastrando y soltando.
Christophe Geers
9
O agregue una clase deshabilitada a la li
Pencilcheck
66
Debe usar las dos sugerencias anteriores: Agregue la clase "deshabilitada" a <li> Y quite el atributo data-toogle o href de la pestaña
Scabbia
9
Simplemente agregué este CSS y ahora class="disabled"funciona como se esperaba.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
partir del
49

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.

Scott Stafford
fuente
1
esta es una de las principales funcionalidades y me
sorprende que
Se implementa en v3
Jeroen K
8
Sí, pero aún se puede hacer clic en los enlaces.
svlada
3
Exactamente, la solución viable hasta ahora es eliminar el atributo de alternar datos.
Cyril N.
34

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;
  }
});
totas
fuente
9
Creo que una combinación de esto y la respuesta de @ hotzu debería ser la respuesta. Se debería agregar la disabledclase al lielemento y luego añadir el código JavaScript que ha especificado, excepto la condición de que estaría mirando en contra sería la siguiente: if ($(this).parent().hasClass('disabled')) {..}.
im1dermike
@ im1dermike ¿No veo por qué estaría haciendo esto?
Totas
Antigua pregunta, pero es lo que encontré, así que estoy agregando esto. Haría esa verificación porque esto lies lo que cambia las imágenes para el usuario y, en consecuencia, es lo que debería tener la disabledclase.
Jared
23

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

Zsolt Tolvaly
fuente
thnx @hotzu me hiciste el día fácil .. :)
Gaurav Singh
Lo recomendaría encarecidamente contra eso. dado que una solución de css solo deja las pestañas en las que se puede hacer clic. en caso de que haya otros eventos que escuchen esos clics, se ejecutarán, lo cual no es el resultado deseado. (¿supongo?)
Demencial
En mi caso, esto hizo el truco. Construí un formulario que consta de múltiples pestañas. Ir a la siguiente pestaña se realiza mediante un botón, que activa un evento de clic en la pestaña para ir. Entonces, deshabilitar los clics por completo no es una opción para mí, pero eliminar los eventos de puntero de las pestañas era justo lo que necesitaba.
sebastian
17

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

.nav-tabs li.disabled a {
    pointer-events: none;
}
Rubel Hossain
fuente
1
Tenía que hacer esto en li.disabled (no li.disabled a)
Daniel
10

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.

akopichin
fuente
6

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!

James
fuente
1
¡bueno! pero necesita e.preventDefault () antes de e.stopImmediatePropagation ()
meuwka
6

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.

Cyril N.
fuente
4

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>
George Siggouroglou
fuente
2

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')
Vinaysingh Khetwal
fuente
1

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');
RafaSashi
fuente
0

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');
});
Abou-Emish
fuente
0

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.

im1dermike
fuente
Ahora que leí más, esta también es básicamente la misma respuesta exacta que la de @Scott Stafford, quien respondió 2 años antes ...
Jim
0

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;
            }
        }
    }
}
pgee70
fuente
0

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
Gaurravs
fuente
0

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>
NIKHIL NEDIYODATH
fuente
-1

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