Czy możesz wyłączyć karty w Bootstrap?

Czy możesz wyłączyć karty w Bootstrap 2.0, tak jak możesz wyłączyć przyciski?

Możesz usunąć data-toggle="tab"atrybut z karty, ponieważ jest on podłączony przy użyciu zdarzeń na żywo / delegatów

Od wersji 2.1, z dokumentacji bootstrap na http://twitter.github.com/bootstrap/components.html#navs , możesz.

Stan wyłączony

W przypadku dowolnego komponentu nawigacyjnego (kart, pigułek lub listy) dodaj .disabled dla szarych linków i bez efektów najechania kursorem. Linki pozostaną jednak klikalne, chyba że usuniesz atrybut href. Alternatywnie możesz zaimplementować niestandardowy JavaScript, aby zapobiec tym kliknięciom.

Zobacz https://github.com/twitter/bootstrap/issues/2764, aby zapoznać się z dyskusją dotyczącą dodawania funkcji.

Dodałem następujący JavaScript, aby zapobiec klikaniu wyłączonych linków:

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

Myślę, że najlepszym rozwiązaniem jest wyłączenie za pomocą CSS. Definiujesz nową klasę i wyłączasz na niej zdarzenia myszy:

.disabledTab{
    pointer-events: none;
}

Następnie przypisujesz tę klasę do żądanego elementu li:

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

Możesz również dodać / usunąć klasę za pomocą jQuery. Na przykład, aby wyłączyć wszystkie karty:

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

Oto przykład: jsFiddle

Nie potrzeba żadnego Jquery, tylko jeden wiersz CSS

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

Używam również następującego rozwiązania:

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

Teraz po prostu dodanie klasy „wyłączone” do rodzica li i karta nie działa i staje się szara.

Stare pytanie, ale w pewnym sensie wskazało mi właściwy kierunek. Metoda, którą wybrałem, polegała na dodaniu wyłączonej klasy do li, a następnie dodaniu następującego kodu do mojego pliku Javascript.

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

Spowoduje to wyłączenie każdego linku, w którym li ma klasę wyłączonych. Trochę podobna do odpowiedzi totas, ale nie uruchomi if za każdym razem, gdy użytkownik kliknie link do karty i nie użyje zwrotu false.

Mam nadzieję, że komuś się przyda!

Dla mnie najlepszym rozwiązaniem była kombinacja niektórych odpowiedzi tutaj, którymi są:

• Dodanie disabledklasy do li, które chcę wyłączyć

• Dodaj ten fragment JS:

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

• Możesz nawet usunąć atrybut data-toggle = "tab", jeśli chcesz, aby Bootstrap w ogóle nie zakłócał twojego kodu.

**** UWAGA **: ** Kod JS tutaj jest ważny, nawet jeśli usuniesz przełącznik danych, ponieważ w przeciwnym razie zaktualizuje on Twój adres URL, dodając do niego #your-idwartość, co nie jest zalecane, ponieważ karta jest wyłączona, dlatego nie powinny być dostępne.

Mając tylko css , możesz zdefiniować dwie klasy 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>

To jest szablon html. Jedyną potrzebną rzeczą jest ustawienie klasy na preferowany element listy.

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

Załóżmy, że to jest Twoja karta TAB i chcesz ją wyłączyć

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

Możesz więc również wyłączyć tę kartę, dodając dynamiczny css

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

Oprócz odpowiedzi Jamesa:

Jeśli chcesz wyłączyć łącze, użyj

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

Jeśli chcesz zapobiec ładowaniu karty przez wyłączony link

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Jeśli chcesz, aby link nie był dostępny

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

Wypróbowałem wszystkie sugerowane odpowiedzi, ale w końcu udało mi się to tak działać

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

Żadna z odpowiedzi nie działa dla mnie. Usuń data-toggle="tab"z azapobiega aktywowaniu karty, ale dodaje również rozszerzenie#tabId skrót do adresu URL. To jest dla mnie nie do przyjęcia. Niedopuszczalne jest również używanie javascript.

To, co działa, jest dodawane do disabledklasy lii usuwając hrefatrybut jej zawartości a.

moje karty były w panelach, więc dodałem class = „disabled” do zakotwiczenia zakładek

w javascript dodałem:

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

a do prezentacji za mniej dodałem:

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

Najbardziej proste i czyste rozwiązanie na uniknięcie tego jest dodanie onclick="return false;"do aznacznika.

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

• Dodanie "cursor:no-drop;"sprawia, że ​​kursor wygląda na wyłączony, ale można go kliknąć , adres URL jest dołączany z celem href dla expage.apsx#Home
• Nie ma potrzeby dodawania "disabled"klasy do <li>usuwania ANDhref

Możesz wyłączyć kartę w bootstrap 4, dodając klasę disableddo elementu podrzędnego nav-item w następujący sposób

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

Oto moja próba. Aby wyłączyć kartę:

1. Dodaj „wyłączone” klasę do LI karty;
2. Usuń atrybut „data-toggle” z LI> A;
3. Pomiń zdarzenie „kliknięcia” na LI> A.

Kod:

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