Bootstrap'ta sekmeleri devre dışı bırakabilir misiniz?

Düğmeleri devre dışı bırakabileceğiniz gibi Bootstrap 2.0'daki sekmeleri devre dışı bırakabilir misiniz?

data-toggle="tab"Özniteliği, canlı / temsilci etkinlikleri kullanarak bağlandığından sekmeden kaldırabilirsiniz

2.1 itibariyle, http://twitter.github.com/bootstrap/components.html#navs adresindeki bootstrap belgelerinden yapabilirsiniz.

Devre dışı durumu

Herhangi bir gezinme bileşeni için (sekmeler, haplar veya liste), gri bağlantılar için .disabled'ı ekleyin ve fareyle üzerine gelme etkisi yok. Ancak, href özniteliğini kaldırmazsanız bağlantılar tıklanabilir olarak kalır. Alternatif olarak, bu tıklamaları önlemek için özel JavaScript uygulayabilirsiniz.

Özellik ekleme tartışması için https://github.com/twitter/bootstrap/issues/2764 adresine bakın .

Devre dışı bırakılmış bağlantıların tıklanmasını önlemek için aşağıdaki Javascript'i ekledim:

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

en iyi çözüm css ile devre dışı bırakmak olduğunu düşünüyorum. Yeni bir sınıf tanımlarsınız ve üzerinde fare olaylarını kapatırsınız:

.disabledTab{
    pointer-events: none;
}

Ve sonra bu sınıfı istediğiniz li öğesine atarsınız:

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

Sınıfı jQuery ile de ekleyebilir / kaldırabilirsiniz. Örneğin, tüm sekmeleri devre dışı bırakmak için:

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

İşte bir örnek: jsFiddle

Herhangi Bir Jquery Gerek Yok, Sadece Bir Satır CSS

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

Ayrıca, aşağıdaki çözümü kullanıyorum:

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

Şimdi ana li'ye sadece 'engelli' sınıfını eklediğinizde sekme çalışmıyor ve gri oluyor.

Eski soru ama bu beni doğru yönde gösterdi. Gittiğim yöntem, devre dışı bırakılmış sınıfı li'ye eklemek ve ardından Javascript dosyama aşağıdaki kodu eklemekti.

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

Bu, li sınıfının devre dışı bırakıldığı herhangi bir bağlantıyı devre dışı bırakır. Totas'ın cevabına benzer bir tür, ancak bir kullanıcı herhangi bir sekme bağlantısını her tıkladığında ve return false kullanmazsa çalışmaz.

Umarım birisi için yararlı olur!

Benim kullanımım için en iyi çözüm, buradaki bazı cevapların bir karışımıydı:

• disabledSınıfı devre dışı bırakmak istediğim li'ye ekleme

• Bu JS parçasını ekle:

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

• Bootstrap'in kodunuza hiç karışmamasını istiyorsanız data-toggle = "tab" özelliğini bile kaldırabilirsiniz.

**** NOT **: ** Buradaki JS kodu önemlidir, çünkü veri geçişini kaldırsanız bile, aksi takdirde #your-idsekmeniz devre dışı olduğu için önerilmez, URL'niz buna değer ekleyerek URL'nizi güncelleyecektir , bu nedenle erişilmemelidir.

Yalnızca css ile iki css sınıfı tanımlayabilirsiniz.

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

Bu bir html şablonu. Gereken tek şey, sınıfı tercih ettiğiniz liste öğesine ayarlamaktır.

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

Diyelim ki bu SEKMİNİZ ve bunu devre dışı bırakmak istiyorsunuz

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

Böylece, dinamik css ekleyerek bu sekmeyi devre dışı bırakabilirsiniz

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

James'in cevabına ek olarak:

Bağlantı kullanımını devre dışı bırakmanız gerekiyorsa

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

Devre dışı bırakılmış bir bağlantının sekmeyi yüklemesini önlemeniz gerekiyorsa

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Bağlantıyı devre dışı bırakmanız gerekiyorsa

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

Önerilen tüm cevapları denedim, ama sonunda böyle çalışmasını sağladım

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

Cevapların hiçbiri benim için işe yaramıyor. Kaldır data-toggle="tab"dan aaktive gelen önler sekmesini, ama aynı zamanda ekler#tabId URL'ye karma. Bu benim için kabul edilemez. Ayrıca kabul edilemez olan javascript kullanmaktır.

Ne işe yarar disabledsınıf içerir ve içeren özniteliğini likaldırır .hrefa

benim sekmeler paneller vardı, bu yüzden sekmeler çapa bir class = 'devre dışı' ekledi

javascript i ekledi:

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

ve daha az sunum için ekledi:

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

En kolay ve temiz bir çözüm bu ekliyor önlemek için onclick="return false;"için aetiketi.

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

• Eklemek "cursor:no-drop;"yalnızca imleci devre dışı bırakmış görünüyor, ancak tıklanabilir , URL eski için href hedefi ile ekleniyorpage.apsx#Home
• AND kaldırmaya "disabled"sınıf eklemeye gerek yok<li>href

disabledNav öğesinin alt öğesine aşağıdaki gibi sınıf ekleyerek bootstrap 4'teki bir sekmeyi devre dışı bırakabilirsiniz

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

İşte benim girişimim. Bir sekmeyi devre dışı bırakmak için:

1. Sekmenin LI'sine "devre dışı" sınıfı ekleyin;
2. 'Veri değiştirme' özelliğini LI> A'dan kaldırın;
3. LI> A'da 'tıklama' etkinliğini bastırın.

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