Czy możesz wyłączyć karty w Bootstrap 2.0, tak jak możesz wyłączyć przyciski?
134
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
class="disabled"
działa zgodnie z oczekiwaniami.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
Od wersji 2.1, z dokumentacji bootstrap na http://twitter.github.com/bootstrap/components.html#navs , możesz.
Zobacz https://github.com/twitter/bootstrap/issues/2764, aby zapoznać się z dyskusją dotyczącą dodawania funkcji.
źródło
Dodałem następujący JavaScript, aby zapobiec klikaniu wyłączonych linków:
źródło
disabled
klasę doli
elementu, a następnie dodać skrypt został podany z wyjątkiem warunku chcesz być sprawdzanie przeciwko byłoby:if ($(this).parent().hasClass('disabled')) {..}
.li
to zmienia wizualizacje dla użytkownika iw konsekwencji jest tym, co powinno miećdisabled
klasę.Myślę, że najlepszym rozwiązaniem jest wyłączenie za pomocą CSS. Definiujesz nową klasę i wyłączasz na niej zdarzenia myszy:
Następnie przypisujesz tę klasę do żądanego elementu li:
Możesz również dodać / usunąć klasę za pomocą jQuery. Na przykład, aby wyłączyć wszystkie karty:
Oto przykład: jsFiddle
źródło
Nie potrzeba żadnego Jquery, tylko jeden wiersz CSS
źródło
Używam również następującego rozwiązania:
Teraz po prostu dodanie klasy „wyłączone” do rodzica li i karta nie działa i staje się szara.
źródło
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.
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!
źródło
Dla mnie najlepszym rozwiązaniem była kombinacja niektórych odpowiedzi tutaj, którymi są:
disabled
klasy do li, które chcę wyłączyćDodaj ten fragment JS:
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-id
wartość, co nie jest zalecane, ponieważ karta jest wyłączona, dlatego nie powinny być dostępne.źródło
Mając tylko css , możesz zdefiniować dwie klasy css.
To jest szablon html. Jedyną potrzebną rzeczą jest ustawienie klasy na preferowany element listy.
źródło
Załóżmy, że to jest Twoja karta TAB i chcesz ją wyłączyć
Możesz więc również wyłączyć tę kartę, dodając dynamiczny css
źródło
Oprócz odpowiedzi Jamesa:
Jeśli chcesz wyłączyć łącze, użyj
Jeśli chcesz zapobiec ładowaniu karty przez wyłączony link
Jeśli chcesz, aby link nie był dostępny
źródło
Wypróbowałem wszystkie sugerowane odpowiedzi, ale w końcu udało mi się to tak działać
źródło
Żadna z odpowiedzi nie działa dla mnie. Usuń
data-toggle="tab"
za
zapobiega 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
disabled
klasyli
i usuwająchref
atrybut jej zawartościa
.źródło
moje karty były w panelach, więc dodałem class = „disabled” do zakotwiczenia zakładek
w javascript dodałem:
a do prezentacji za mniej dodałem:
źródło
Najbardziej proste i czyste rozwiązanie na uniknięcie tego jest dodanie
onclick="return false;"
doa
znacznika."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
"disabled"
klasy do<li>
usuwania ANDhref
źródło
Możesz wyłączyć kartę w bootstrap 4, dodając klasę
disabled
do elementu podrzędnego nav-item w następujący sposóbźródło
Oto moja próba. Aby wyłączyć kartę:
Kod:
źródło