부트 스트랩에서 탭을 비활성화 할 수 있습니까?

development

부트 스트랩에서 탭을 비활성화 할 수 있습니까?

big-blog 2020. 7. 1. 07:34

부트 스트랩에서 탭을 비활성화 할 수 있습니까?

버튼을 비활성화 할 수있는 것처럼 Bootstrap 2.0에서 탭을 비활성화 할 수 있습니까?

data-toggle="tab"실시간 / 대리인 이벤트를 사용하여 탭에 연결된 속성을 탭에서 제거 할 수 있습니다.

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

가장 좋은 해결책은 CSS로 비활성화하는 것 같습니다. 새 클래스를 정의하고 마우스 이벤트를 끕니다.

.disabledTab{
    pointer-events: none;
}

그런 다음이 클래스를 원하는 li 요소에 할당하십시오.

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

jQuery를 사용하여 클래스를 추가 / 제거 할 수도 있습니다. 예를 들어 모든 탭을 비활성화하려면

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

예제는 다음과 같습니다. jsFiddle

Jquery 필요 없음, 단 한 줄의 CSS

.nav-tabs li.disabled a {
    pointer-events: none;
}

또한 다음 솔루션을 사용하고 있습니다.

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

이제 부모 li에 탭 'disabled'를 추가하면 탭이 작동하지 않고 회색이됩니다.

오래된 질문이지만 그것은 올바른 방향으로 나를 가리 켰습니다. 내가 간 방법은 비활성화 된 클래스를 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활성화에서 방지 탭을, 그러나 또한 추가 #tabIdURL에 해시를. 그것은 받아 들일 수 없습니다. 허용되지 않는 것은 자바 스크립트를 사용하는 것입니다.

What does work is added the disabled class to the li and removing the href attribute of its containing a.

my tabs were in panels, so i added a class='disabled' to the tabs anchor

in javascript i added:

$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if ($(this).hasClass('disabled')){
        e.preventDefault();
        return false;
    }
})

and for presentation in less i added:

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

Most easy and clean solution to avoid this is adding onclick="return false;" to a tag.

<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>

Adding "cursor:no-drop;" just makes cursor look disabled, but is clickable, Url gets appending with href target for ex page.apsx#Home
No need of adding "disabled" class to <li> AND removing href

You can disable a tab in bootstrap 4 by adding class disabled to the child of nav-item as follows

<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>

Here's my attempt. To disable a tab:

Add "disabled" class to tab's LI;
Remove 'data-toggle' attribute from LI > A;
Suppress 'click' event on LI > A.

Code:

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

참고URL : https://stackoverflow.com/questions/9237314/can-you-disable-tabs-in-bootstrap

'development' 카테고리의 다른 글

DataTable을 반복하는 방법 (0)	2020.07.01
INSTALL_PARSE_FAILED_NO_CERTIFICATES 오류는 무엇입니까? (0)	2020.07.01
FileProvider 충돌-null 문자열에서 XmlResourceParser를 호출하려고 시도합니다. (0)	2020.07.01
일부 속성별로 개체 목록을 정렬하는 방법 (0)	2020.07.01
JSON 문자열을 JSON 객체로 변환 C # (0)	2020.07.01

현재글부트 스트랩에서 탭을 비활성화 할 수 있습니까?

big-blog

부트 스트랩에서 탭을 비활성화 할 수 있습니까?

부트 스트랩에서 탭을 비활성화 할 수 있습니까?

Jquery 필요 없음, 단 한 줄의 CSS

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

부트 스트랩에서 탭을 비활성화 할 수 있습니까?

부트 스트랩에서 탭을 비활성화 할 수 있습니까?

Jquery 필요 없음, 단 한 줄의 CSS

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바