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

Начиная с версии 2.1, из документации по загрузке в http://twitter.github.com/bootstrap/components.html#navs вы можете.

Отключено состояние

Для любого навигационного компонента (вкладки, пилюли или список) добавьте .disabled для серого ссылки и эффекты зависания. Однако ссылки останутся доступными, если вы не удалите атрибут href. Кроме того, вы могли бы реализовать пользовательский JavaScript для предотвращения этих кликов.

См. https://github.com/twitter/bootstrap/issues/2764 для добавления функции обсуждения.

Я добавил следующий Javascript для предотвращения кликов по отключенным ссылкам:

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

Я думаю, что лучшее решение отключается с помощью css. Вы определяете новый класс, и вы выключаете на нем события мыши:

.disabledTab{
    pointer-events: none;
}

И затем вы назначаете этот класс желаемому элементу li:

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

Вы также можете добавить/удалить класс с помощью jQuery. Например, чтобы отключить все вкладки:

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

Вот пример: jsFiddle

Кроме того, я использую следующее решение:

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

Теперь вы просто добавляете класс 'disabled' в родительский li и вкладка не работает и становится серой.

Старый вопрос, но он как бы указал мне в правильном направлении. Метод, которым я занимался, заключался в том, чтобы добавить отключенный класс к ли, а затем добавил следующий код в мой файл Javascript.

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

Это отключит любую ссылку, в которой у ли класса есть отключенный класс. Тип похожего на тотальный ответ, но он не будет работать, если каждый раз, когда пользователь нажимает на любую ссылку вкладки и не использует return false.

Надеюсь, это будет полезно кому-то!

Для моего использования лучшим решением было сочетание некоторых из ответов здесь:

• Добавление класса disabled в li, который я хочу отключить

• Добавьте этот кусок JS:

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

• Вы даже можете удалить атрибут data-toggle = "tab", если вы хотите, чтобы Bootstrap не вмешивался в ваш код.

**** ПРИМЕЧАНИЕ **: ** Код JS здесь важен, даже если вы удаляете переключение данных, поскольку в противном случае он обновит ваш URL, добавив к нему значение #your-id, что не рекомендуется потому что ваша вкладка отключена, поэтому ее нельзя открывать.

Нет необходимости в JQuery, только одна строка CSS

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

Предположим, это ваша TAB, и вы хотите отключить ее.

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

Таким образом, вы также можете отключить эту вкладку, добавив динамический css

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

С только css вы можете определить два класса 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>

Это html-шаблон. Единственное, что нужно, это установить класс в ваш предпочтительный элемент списка.

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

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

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

$('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');

Самое легкое и чистое решение, чтобы избежать этого, добавляет тег 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;" просто отключает курсор, но clickable, Url получает добавление с целью href для ex page.apsx#Home
• Не нужно добавлять класс "disabled" в <li> И удалять href

мои вкладки были в панелях, поэтому я добавил 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;
            }
        }
    }
}

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

Что добавляет класс disabled в li и удаляет атрибут href его содержащего 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');
});

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

• Добавить класс "disabled" в вкладку LI;
• Удалить атрибут 'data-toggle' из LI > A;
• Подавить 'click' событие на 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);