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

Odpowiedzi:

188

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

Betty
źródło
11
Dzięki działał gratka, dodano też css "kursor: no-drop;" dla kursora, więc użyj wie, dlaczego nie mogą go kliknąć
arbme,
23
kursor: niedozwolony; jest bardziej odpowiednie w tym przypadku. Chyba że faktycznie przeciągasz i upuszczasz.
Christophe Geers,
9
Lub dodaj klasę niepełnosprawnych do li
Pencilcheck
6
Musisz skorzystać z obu powyższych sugestii: Dodaj klasę „disabled” do <li> ORAZ usuń atrybut data-toogle lub href z karty
Scabbia,
9
Po prostu dodałem ten CSS i teraz class="disabled"działa zgodnie z oczekiwaniami.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
efe
49

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.

Scott Stafford
źródło
1
jest to jedna z głównych funkcji i wprawia mnie w
zakłopotanie,
Jest zaimplementowany w wersji 3
Jeroen K
8
Tak, ale linki są nadal klikalne.
svlada
3
Dokładnie, jak dotąd realnym rozwiązaniem jest usunięcie atrybutu data-toggle.
Cyril N.
34

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;
  }
});
totas
źródło
9
Myślę, że odpowiedzią powinno być połączenie tego i odpowiedzi @ hotzu. Należy dodać disabledklasę do lielementu, a następnie dodać skrypt został podany z wyjątkiem warunku chcesz być sprawdzanie przeciwko byłoby: if ($(this).parent().hasClass('disabled')) {..}.
im1dermike
@ im1dermike Nie widzę, dlaczego miałbym to robić?
totas
Stare pytanie, ale właśnie je znalazłem, więc dodaję to. Zrobiłbyś to sprawdzenie, ponieważ lito zmienia wizualizacje dla użytkownika iw konsekwencji jest tym, co powinno mieć disabledklasę.
Jared
23

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

Zsolt Tolvaly
źródło
thnx @hotzu u made my day easy .. :)
Gaurav Singh
zdecydowanie odradzałbym to. ponieważ rozwiązanie tylko CSS pozostawia klikalne zakładki. w przypadku, gdy inne zdarzenia nasłuchują tych kliknięć, zostaną one wykonane, co nie jest pożądanym wynikiem. (chyba?)
Dementic
W moim przypadku to załatwiło sprawę. Zbudowałem formularz składający się z wielu zakładek. Przechodzenie do następnej karty odbywa się za pomocą przycisku, który uruchamia zdarzenie kliknięcia na karcie, do której należy przejść. Tak więc całkowite wyłączenie kliknięć nie jest dla mnie opcją, ale usunięcie zdarzeń wskaźnika z kart było tym, czego potrzebowałem.
sebastian,
17

Nie potrzeba żadnego Jquery, tylko jeden wiersz CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}
Rubel Hossain
źródło
1
Musiałem to zrobić na li.disabled (nie li.disabled a)
Daniel
10

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.

akopichin
źródło
6

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!

James
źródło
1
dobry! ale potrzebujesz e.preventDefault () przed e.stopImmediatePropagation ()
meuwka
6

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.

Cyryl N.
źródło
4

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>
George Siggouroglou
źródło
2

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')
Vinaysingh Khetwal
źródło
1

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');
RafaSashi
źródło
0

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');
});
Abou-Emish
źródło
0

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

im1dermike
źródło
Teraz, gdy czytam dalej, jest to w zasadzie ta sama dokładna odpowiedź, jak ta od @Scott Stafford, który odpowiedział na nią 2 lata wcześniej ...
Jim
0

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;
            }
        }
    }
}
pgee70
źródło
0

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
Gaurravs
źródło
0

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>
NIKHIL NEDIYODATH
źródło
-1

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);
temuri
źródło