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

Ответы:

188

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

Бетти
источник
11
Спасибо сработал, а также добавил css "cursor: no-drop;" для курсора, так что использование знает, почему они не могут щелкнуть по нему
arbme
23
курсор: не разрешен; более уместно в этом случае. Если вы на самом деле не перетаскиваете.
Кристоф Гирс
9
Или добавьте отключенный класс в li
Pencilcheck
6
Вы должны использовать оба предложения выше: добавьте «отключенный» класс в <li> и удалите атрибут data-toogle или href из вкладки
Scabbia
9
Я просто добавил этот CSS и теперь class="disabled"работает как положено.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
effe
49

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

Неработающее состояние

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

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

Скотт Стаффорд
источник
1
это одна из основных функциональных возможностей, и меня это поражает, пока она не реализована
DS_web_developer
Это реализовано в v3
Jeroen K
8
Да, но ссылки по-прежнему кликабельны.
svlada
3
На данный момент жизнеспособным решением является удаление атрибута data-toggle.
Кирилл Н.
34

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

$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
  if ($(this).hasClass("disabled")) {
    e.preventDefault();
    return false;
  }
});
Totas
источник
9
Я думаю, что сочетание этого и ответа @ hotzu должно быть ответом. Вы должны добавить disabledкласс к liэлементу , а затем добавить JavaScript, указанные кроме условия вы бы проверки против будет: if ($(this).parent().hasClass('disabled')) {..}.
im1dermike
@ im1dermike Не понимаю, зачем мне это делать?
Итого
Старый вопрос, но это то, что я нашел, поэтому я добавляю это. Вы бы сделали эту проверку, потому что liэто то, что изменяет визуальные элементы для пользователя, и, следовательно, то, что должно иметь disabledкласс.
Джаред
23

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

.disabledTab{
    pointer-events: none;
}

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

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

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

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

Вот пример: jsFiddle

Жолт Толвалы
источник
thnx @hotzu ты сделал мой день легким .. :)
Гаурав Сингх
я настоятельно рекомендую против этого. так как решение только для CSS оставляет вкладки кликабельными. в случае, если есть другие события, прослушивающие эти клики, они будут выполнены, что не является желаемым результатом. (я предполагаю?)
Дементик
В моем случае это помогло. Я построил форму, состоящую из нескольких вкладок. Переход к следующей вкладке осуществляется с помощью кнопки, которая вызывает событие щелчка на вкладке для перехода. Поэтому полное отключение кликов для меня не вариант, но удаление событий указателей на вкладках было именно тем, что мне было нужно.
Себастьян
17

Не нужно никаких JQuery, только одна строка CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}
Рубель Хоссейн
источник
1
Я должен был сделать это на li.disabled (не li.disabled)
Даниил
10

Также я использую следующее решение:

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

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

akopichin
источник
6

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

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

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

Надеюсь, это кому-нибудь пригодится!

Джеймс
источник
1
хорошо! но нужно e.preventDefault () перед e.stopImmediatePropagation ()
meuwka
6

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

  • Добавление disabledкласса в li я хочу отключить
  • Добавьте этот кусок JS:

       `$(".nav .disabled>a").on("click", function(e) {
            e.preventDefault();
            return false;
        });`
  • Вы даже можете удалить атрибут data-toggle = "tab", если хотите, чтобы Bootstrap вообще не мешал вашему коду.

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

Кирилл Н.
источник
4

Используя только 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>
Джордж Сиггуроглу
источник
2

Предположим, это ваш 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')
Vinaysingh Khetwal
источник
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');
RafaSashi
источник
0

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

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');
});
Абу-Emish
источник
0

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

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

im1dermike
источник
Теперь, когда я прочитал далее, это также в основном тот же самый точный ответ, что и ответ @Scott Stafford, который ответил на это 2 годами раньше ...
Джим
0

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

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

Вы можете отключить вкладку в начальной загрузке 4, добавив класс disabledк потомку элемента nav следующим образом

<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>
НИХИЛ НЕДИЙОДАТ
источник
-1

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

  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);
Темури
источник