Bisakah Anda menonaktifkan tab di Bootstrap?

Bisakah Anda menonaktifkan tab di Bootstrap 2.0 seperti Anda dapat menonaktifkan tombol?

Anda dapat menghapus data-toggle="tab"atribut dari tab karena terhubung menggunakan acara langsung / delegasi

Mulai 2.1, dari dokumentasi bootstrap di http://twitter.github.com/bootstrap/components.html#navs , Anda bisa.

Status dinonaktifkan

Untuk komponen nav apa pun (tab, pil, atau daftar), tambahkan .disable untuk tautan abu-abu dan tidak ada efek hover. Tautan akan tetap dapat diklik, kecuali Anda menghapus atribut href. Atau, Anda dapat menerapkan JavaScript khusus untuk mencegah klik tersebut.

Lihat https://github.com/twitter/bootstrap/issues/2764 untuk fitur tambah diskusi.

Saya menambahkan Javascript berikut untuk mencegah klik pada tautan yang dinonaktifkan:

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

saya pikir solusi terbaik adalah menonaktifkan dengan css. Anda mendefinisikan kelas baru dan mematikan aktivitas mouse di dalamnya:

.disabledTab{
    pointer-events: none;
}

Dan kemudian Anda menetapkan kelas ini ke elemen li yang diinginkan:

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

Anda dapat menambah / menghapus kelas dengan jQuery juga. Misalnya, untuk menonaktifkan semua tab:

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

Berikut ini sebuah contoh: jsFiddle

Tidak Perlu Jquery, Hanya Satu Baris CSS

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

Saya juga menggunakan solusi berikut:

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

Sekarang Anda hanya menambahkan kelas 'nonaktif' ke li induk dan tab tidak berfungsi dan menjadi abu-abu.

Pertanyaan lama tapi itu menunjuk saya ke arah yang benar. Metode yang saya gunakan adalah menambahkan kelas yang dinonaktifkan ke li dan kemudian menambahkan kode berikut ke file Javascript saya.

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

Ini akan menonaktifkan tautan apa pun di mana li memiliki kelas yang dinonaktifkan. Agak mirip dengan jawaban totas tetapi itu tidak akan berjalan jika setiap kali pengguna mengklik tautan tab apa pun dan tidak menggunakan return false.

Semoga bermanfaat bagi seseorang!

Untuk saya gunakan, solusi terbaik adalah campuran dari beberapa jawaban di sini, yaitu:

• Menambahkan disabledkelas ke li saya ingin menonaktifkan

• Tambahkan sepotong JS ini:

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

• Anda bahkan dapat menghapus atribut data-toggle = "tab" jika Anda ingin Bootstrap sama sekali tidak mengganggu kode Anda.

**** CATATAN **: ** Kode JS di sini penting, bahkan jika Anda menghapus data-toggle karena jika tidak, itu akan memperbarui URL Anda dengan menambahkan #your-idnilai itu, yang tidak direkomendasikan karena tab Anda dinonaktifkan, dengan demikian tidak boleh diakses.

Dengan hanya css , Anda dapat mendefinisikan dua kelas 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>

Ini adalah template html. Satu-satunya hal yang diperlukan adalah mengatur kelas ke item daftar pilihan Anda.

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

Misalkan, ini adalah TAB Anda dan Anda ingin menonaktifkannya

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

Jadi, Anda juga dapat menonaktifkan tab ini dengan menambahkan css dinamis

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

Selain jawaban James:

Jika Anda perlu menonaktifkan penggunaan tautan

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

Jika Anda perlu mencegah tautan yang dinonaktifkan memuat tab

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Jika Anda tidak dapat membuat tautan

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

Saya mencoba semua jawaban yang disarankan, tetapi akhirnya saya membuatnya bekerja seperti ini

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

Tidak ada jawaban yang cocok untuk saya. Hapus data-toggle="tab"dari amencegah tab dari mengaktifkan, tetapi juga menambahkan #tabIdhash ke URL. Bagi saya itu tidak bisa diterima. Yang juga tidak bisa diterima adalah menggunakan javascript.

Apa yang berhasil ditambahkan disabledkelas ke lidan menghapus hrefatribut yang mengandungnya a.

tab saya ada di panel, jadi saya menambahkan kelas = 'dinonaktifkan' ke jangkar tab

dalam javascript saya menambahkan:

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

dan untuk presentasi kurang saya tambahkan:

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

Kebanyakan solusi mudah dan bersih untuk menghindari hal ini adalah menambahkan onclick="return false;"untuk atag.

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

• Menambahkan "cursor:no-drop;"hanya membuat kursor terlihat dinonaktifkan, tetapi dapat diklik , Url akan ditambahkan dengan target href untuk expage.apsx#Home
• Tidak perlu menambahkan "disabled"kelas ke <li>DAN menghapushref

Anda dapat menonaktifkan tab di bootstrap 4 dengan menambahkan kelas disabledke anak dari nav-item sebagai berikut

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

Inilah usaha saya. Untuk menonaktifkan tab:

1. Tambahkan kelas "nonaktif" ke tab LI;
2. Hapus atribut 'data-toggle' dari LI> A;
3. Menekan acara 'klik' di LI> A.

Kode:

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