답변:
data-toggle="tab"실시간 / 대리인 이벤트를 사용하여 탭에 연결된 속성을 탭에서 제거 할 수 있습니다.
class="disabled"예상대로 작동합니다.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
2.1부터 http://twitter.github.com/bootstrap/components.html#navs의 부트 스트랩 문서에서 할 수 있습니다.
비활성화 된 상태
탐색 구성 요소 (탭, 알약 또는 목록)의 경우 회색 링크에 대해 .disabled를 추가하고 호버링 효과가 없습니다. href 속성을 제거하지 않으면 링크는 클릭 할 수 있습니다. 또는 이러한 클릭을 방지하기 위해 사용자 지정 JavaScript를 구현할 수 있습니다.
기능 추가 설명 은 https://github.com/twitter/bootstrap/issues/2764 를 참조 하십시오 .
비활성화 된 링크를 클릭하지 못하도록 다음 Javascript를 추가했습니다.
$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
if ($(this).hasClass("disabled")) {
e.preventDefault();
return false;
}
});disabled받는 클래스를 li요소 다음 당신은 당신이 될 것에 대해 점검 할 것 조건을 제외하고 지정된 자바 스크립트를 추가합니다 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
오래된 질문이지만 그것은 올바른 방향으로 나를 가리 켰습니다. 내가 간 방법은 비활성화 된 클래스를 li에 추가 한 다음 Javascript 파일에 다음 코드를 추가하는 것입니다.
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});이것은 li 클래스가 비활성화 된 링크를 비활성화합니다. totas의 답변과 비슷하지만 사용자가 탭 링크를 클릭 할 때마다 false를 반환하지 않으면 if가 실행되지 않습니다.
잘만되면 그것은 누군가에게 유용 할 것입니다!
내가 사용하기에 가장 좋은 해결책은 다음과 같은 답변 중 일부를 혼합 한 것입니다.
disabled비활성화하려는 li에 클래스 추가이 JS 조각을 추가하십시오.
`$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});`부트 스트랩이 코드를 전혀 방해하지 않게하려면 data-toggle = "tab"속성을 제거 할 수도 있습니다.
**** 참고 ** : ** 여기에서 JS 코드는 중요합니다. 그렇지 않으면 데이터 토글을 제거하더라도 #your-id값을 추가하여 URL을 업데이트 하므로 탭이 비활성화되어 있으므로 권장하지 않습니다. 따라서 액세스해서는 안됩니다.
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에 해시를. 그것은 받아 들일 수 없습니다. 허용되지 않는 것은 자바 스크립트를 사용하는 것입니다.
작동하는 것은 disabled클래스에 추가되고 포함 li하는 href속성을 제거합니다 a.
내 탭은 패널에 있었으므로 탭 앵커에 class = 'disabled'를 추가했습니다.
자바 스크립트에서 나는 추가했다 :
$(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 disabled다음과 같이 nav-item의 자식에 클래스 를 추가하여 부트 스트랩 4에서 탭을 비활성화 할 수 있습니다
<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);