Можете ли вы отключить вкладки в Bootstrap?

Question

Можете ли вы отключить вкладки в Bootstrap 2.0, как вы можете отключить кнопки?

Answer 1

В дополнение к ответу Джеймса:

Если вам нужно отключить ссылку, используйте

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

Если вам нужно запретить загрузке отключенной ссылки вкладку

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

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

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

Если вам не удалось установить ссылку

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

Answer 2

Самое простое и чистое решение, позволяющее избежать этого, - добавить onclick="return false;" к тегу a.

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

• Добавление "cursor:no-drop;" просто делает курсор отключенным, но при этом кликабелен, Url добавляется с целью href для ex page.apsx#Home
• Нет необходимости добавлять "disabled" класс к <li> И удалять href

Answer 3

мои вкладки были в панелях, поэтому я добавил class = 'disabled' в якорь вкладок

в javascript, который я добавил:

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

и для представления в меньшем количестве я добавил:

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

Answer 4

Вот моя попытка.Чтобы отключить вкладку:

1. Добавить «отключенный» класс в LI вкладки;
2. Удалить атрибут «data-toggle» из LI> A;
3. Подавить щелчок'событие на LI> A.

Код:

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

Answer 5

Ни один из ответов не работает для меня. Удаление data-toggle="tab" из a запрещает активацию вкладки, но также добавляет хеш #tabId в URL. Это неприемлемо для меня. Что также неприемлемо, так это использование javascript.

Что работает, добавляется класс disabled к li и удаляется атрибут href, содержащий его a.

Answer 6

Я перепробовал все предложенные ответы, но, наконец, я сделал так, как это

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