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

Question

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

Answer 1

Вы можете удалить атрибут data-toggle="tab" со вкладки, так как он подключен с помощью событий live / делегата

Answer 2

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

Отключено

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

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

Answer 3

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

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

Answer 4

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

.disabledTab{
    pointer-events: none;
}

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

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

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

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

Вот пример: jsFiddle

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

• Добавьте этот фрагмент JS:

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

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

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

Answer 8

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

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

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

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

Answer 9

С только 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>

Answer 10

Предположим, это ваш 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')