Чи можете вимкнути вкладки в Bootstrap?


Відповіді:


188

Ви можете видалити data-toggle="tab"атрибут з вкладки, коли він підключений, використовуючи події "live / delegate"


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; } }
ефект

49

Станом на 2.1, з документації для завантаження на веб-сайті http://twitter.github.com/bootstrap/components.html#navs ви можете.

Стан інвалідів

Для будь-якого компонента nav (вкладки, таблетки чи список) додайте .disabled для сірих посилань і жодних ефектів наведення. Однак посилання залишатимуться для натискання, якщо ви не видалите атрибут href. Крім того, ви можете застосувати користувальницький JavaScript, щоб запобігти цим клікам.

Див. Https://github.com/twitter/bootstrap/isissue/2764 для обговорення функції додавання.


1
це одна з головних функцій, і, як мені здається, вона ще не реалізована
DS_web_developer

Він реалізований у v3
Jeroen K

8
Так, але посилання все ще можна натискати.
svlada

3
Саме досі прийнятним рішенням є видалення атрибута перемикання даних.
Кирило Н.

34

Я додав наступний Javascript, щоб запобігти натисканням на відключені посилання:

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

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 u полегшив мій день .. :)
Gaurav Singh

я настійно рекомендую проти цього. оскільки лише рішення css залишає вкладки доступними. якщо є інші прослуховування цих кліків, вони будуть виконані, що не є бажаним результатом. (я здогадуюсь?)
Дементік

У моєму випадку це зробило трюк. Я побудував форму, що складається з декількох вкладок. Перехід до наступної вкладки здійснюється за допомогою кнопки, яка запускає події клацання на вкладці, на яку потрібно перейти. Тож відключення кліків не є для мене варіантом, але видалення подій вказівника з вкладок було саме тим, що мені потрібно.
себастьян


10

Також я використовую таке рішення:

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

Тепер ви просто додаєте клас "відключено" до батьківського li та вкладки, але не працює та стає сірим.


6

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

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

Це вимкне будь-яке посилання, де li має клас вимкнених. Вигляд подібний до відповіді totas, але він не запускається, якщо кожен раз, коли користувач натискає будь-яке посилання на вкладку, і він не використовує 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')

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

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

0

Жодна відповідь не працює для мене. Видаліть data-toggle="tab"із aзапобіжника активізацію вкладки, але вона також додає#tabId хеш до URL. Це для мене неприйнятно. Що також неприпустимо - це використання JavaScript.

Що працює, додається disabledклас до атрибута, що містить його, liта видалення .hrefa


Тепер, коли я читаю далі, це також в основному така ж точна відповідь, як і відповідь від @Scott Stafford, який відповів на неї 2 роки раніше ...
Jim

0

мої вкладки були на панелях, тож я додав клас = 'відключений' до якоря вкладок

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

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

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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.