нав нав-вкладку отключить вкладку с помощью JQuery не работает

Question

У меня есть бутстраповские вкладки нав следующим образом:

<ul class="nav nav-tabs"> 
    <li id="tab_a" class="active"><a data-toggle="tab" href="#ABC"><strong>ABC</strong></a></li> 
    <li><a data-toggle="tab" href="#PQR">PQR</a></li> 
    <li><a data-toggle="tab" href="#XYZ">XYZ</a></li> 
    </ul> 

Я пытаюсь отключить вкладку ABC следующим образом, используя jQuery и она не должна быть Нажать на в состоянии:

$('#tab_a a').attr('disabled', true); 

Не работает!

Answer 1

Я попробовал это в JSFiddle и он должен работать:

$('#tab_a').find('a').removeAttr('data-toggle'); 

Answer 2

Недопустимый атрибут для привязки. Ниже только работа around.Kind неактивного

Пожалуйста, попробуйте следующие: -

.disable_a_href{ 
    pointer-events: none; 
} 

$('#tab_a a').addClass("disable_a_href"); 

Добавлено далее

$('#tab_a a').attr("href","javascript:void(0)") 

Вы можете проверить here

Answer 3

Вы можете попробовать использовать этот код сделать ваш код более легким

<script type="text/javascript"> 

    $('#tab_a').on('click', function() { 
    return false; 
    }); 
</script> 

Тогда вы также можете поместить некоторые CSS, чтобы изменить курсор на инвалидов

<ul class="nav nav-tabs"> 
    <li id="tab_a" class="active"><a data-toggle="tab" href="#ABC" style="cursor: not-allowed;"><strong>ABC</strong></a></li> 
    <li><a data-toggle="tab" href="#PQR">PQR</a></li> 
    <li><a data-toggle="tab" href="#XYZ">XYZ</a></li> 
</ul> 

надеюсь, что это поможет ...

Answer 4

Прежде всего, я предполагаю, что вы используете Bootstrap 3, как я.

Я видел ответы на вопросы вроде этого, говорящие, что можно просто вернуть false из click событие, чтобы отключить вкладку. Однако, похоже, это решение зависит от порядка присоединения событий. Если событие «Bootstrap» запускается до вашего «отмены», это не сработает. И это было в случае приложения, над которым я работаю.

Что на самом деле работало для меня, было Bootstrap tab events.

Это как ваш код должен выглядеть используя show.bs.tab событие:

$('#tab_a a').on('show.bs.tab', function() { 
    return false; 
}); 

При необходимости, вы можете добавить дополнительную логику внутри функции.