Відповіді:
Ви можете видалити data-toggle="tab"
атрибут з вкладки, коли він підключений, використовуючи події "live / delegate"
class="disabled"
працює так, як і очікувалося.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
Станом на 2.1, з документації для завантаження на веб-сайті http://twitter.github.com/bootstrap/components.html#navs ви можете.
Стан інвалідів
Для будь-якого компонента nav (вкладки, таблетки чи список) додайте .disabled для сірих посилань і жодних ефектів наведення. Однак посилання залишатимуться для натискання, якщо ви не видалите атрибут href. Крім того, ви можете застосувати користувальницький JavaScript, щоб запобігти цим клікам.
Див. Https://github.com/twitter/bootstrap/isissue/2764 для обговорення функції додавання.
Я додав наступний Javascript, щоб запобігти натисканням на відключені посилання:
$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
if ($(this).hasClass("disabled")) {
e.preventDefault();
return false;
}
});
disabled
клас до li
елементу , а потім додати JavaScript, зазначені крім умови ви б перевірки проти буде: if ($(this).parent().hasClass('disabled')) {..}
.
li
це те, що змінює візуальні зображення для користувача і, отже, те, що повинно мати disabled
клас.
Я думаю, що найкращим рішенням є відключення css. Ви визначаєте новий клас і вимикаєте події миші на ньому:
.disabledTab{
pointer-events: none;
}
А потім ви присвоюєте цьому класу потрібний елемент li:
<li class="disabled disabledTab"><a href="#"> .... </a></li>
Ви також можете додати / видалити клас за допомогою jQuery. Наприклад, щоб вимкнути всі вкладки:
$("ul.nav li").removeClass('active').addClass('disabledTab');
Ось приклад: jsFiddle
.nav-tabs li.disabled a {
pointer-events: none;
}
Старе питання, але воно наче вказувало на мене в правильному напрямку. Метод, до якого я пішов, полягав у тому, щоб додати клас li відключений до li, а потім додав наступний код до мого файлу Javascript.
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});
Це вимкне будь-яке посилання, де li має клас вимкнених. Вигляд подібний до відповіді totas, але він не запускається, якщо кожен раз, коли користувач натискає будь-яке посилання на вкладку, і він не використовує return false.
Сподіваємось, комусь це стане в нагоді!
Для мого використання найкращим рішенням було поєднання деяких відповідей тут:
disabled
класу до li я хочу відключитиДодайте цю частину JS:
`$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});`
Ви навіть можете видалити атрибут data-toggle = "tab", якщо хочете, щоб Bootstrap взагалі не втручався у ваш код.
**** ПРИМІТКА **: ** Код JS тут важливий, навіть якщо ви видалите перемикач даних, оскільки в іншому випадку він оновить вашу URL-адресу, додавши #your-id
до неї значення, що не рекомендується, оскільки ваша вкладка вимкнена, таким чином, не слід отримувати доступ до них.
Маючи лише 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>
Припустимо, це ваш 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')
Окрім відповіді Джеймса:
Якщо вам потрібно відключити використання посилання
$('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');
Я спробував усі запропоновані відповіді, але нарешті я змусив це працювати так
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');
});
Жодна відповідь не працює для мене. Видаліть data-toggle="tab"
із a
запобіжника активізацію вкладки, але вона також додає#tabId
хеш до URL. Це для мене неприйнятно. Що також неприпустимо - це використання JavaScript.
Що працює, додається disabled
клас до атрибута, що містить його, li
та видалення .href
a
мої вкладки були на панелях, тож я додав клас = 'відключений' до якоря вкладок
у 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;
}
}
}
}
Найпростішим і найпростішим рішенням, щоб цього уникнути, є додавання 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
Ви можете відключити вкладку в завантажувальній програмі 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>
Ось моя спроба. Щоб вимкнути вкладку:
Код:
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);