क्या आप बूटस्ट्रैप में टैब को अक्षम कर सकते हैं?

Question

क्या आप बूटस्ट्रैप 2.0 में टैब को अक्षम कर सकते हैं जैसे आप बटन अक्षम कर सकते हैं?

Answer 1

आप data-toggle="tab"टैब से विशेषता को हटा सकते हैं क्योंकि यह लाइव / डेलीगेट ईवेंट का उपयोग करके झुका हुआ है

Comments

धन्यवाद ने एक इलाज किया, सीएसएस भी जोड़ा "कर्सर: नो-ड्रॉप;" कर्सर का उपयोग करने के लिए पता है कि वे इसे क्यों नहीं क्लिक कर सकते हैं

— arbme

कर्सर: अनुमति नहीं; इस मामले में अधिक उपयुक्त है। जब तक आप वास्तव में ड्रैग-एंड-ड्रॉपिंग नहीं करते।

— क्रिस्टोफ़ गेर्स

या ली में एक अक्षम वर्ग जोड़ें

— पेंसिल्विक

आपको ऊपर दिए गए दोनों सुझावों का उपयोग करने की आवश्यकता है: <li> "अक्षम" वर्ग को <li> में जोड़ें और टैब से डेटा-टॉगल या href विशेषता निकालें

— Scabbia

मैंने बस इस सीएसएस को जोड़ा और अब class="disabled"उम्मीद के .nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }

— मुताबिक

Answer 2

2.1 के रूप में, बूटस्ट्रैप डॉक्यूमेंटेशन से http://twitter.github.com/bootstrap/compords.html#navs पर , आप कर सकते हैं।

विकलांग अवस्था

किसी भी नव घटक (टैब, पिल्स या लिस्ट) के लिए, ग्रे लिंक के लिए .Disabled और कोई हॉवर इफेक्ट्स न जोड़ें। जब तक आप href विशेषता को नहीं हटाते तब तक लिंक क्लिक करने योग्य रहेगा। वैकल्पिक रूप से, आप उन क्लिक्स को रोकने के लिए कस्टम जावास्क्रिप्ट लागू कर सकते हैं।

चर्चा जोड़ें सुविधा के लिए https://github.com/twitter/bootstrap/issues/2764 देखें ।

Comments

यह मुख्य कार्यों में से एक है और यह मुझे अभी तक कार्यान्वित नहीं करता है

— DS_web_developer

इसे v3 में लागू किया गया है

— Jeroen K

हां, लेकिन लिंक अभी भी क्लिक करने योग्य हैं।

— svlada

वास्तव में, अब तक व्यवहार्य समाधान डेटा टॉगल विशेषता को हटाने के लिए है।

— सिरिल एन।

Answer 3

विकलांग लिंक पर क्लिक को रोकने के लिए मैंने निम्नलिखित जावास्क्रिप्ट जोड़ी:

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

Comments

मुझे लगता है कि इस और @ हॉटज़ू की प्रतिक्रिया का एक संयोजन होना चाहिए। आपको disabledकक्षा को liतत्व में जोड़ना चाहिए और फिर आपके द्वारा निर्दिष्ट शर्त को छोड़कर जावास्क्रिप्ट को जोड़ना होगा जिसके खिलाफ आप जाँच कर रहे हैं if ($(this).parent().hasClass('disabled')) {..}:।

— im1dermike

@ im1dermike मैं यह नहीं देखता कि मैं ऐसा क्यों कर रहा हूँ?

— totas

पुराना सवाल है, लेकिन यह वही है जो मैंने पाया है इसलिए मैं इसे जोड़ रहा हूं। आप वह जांच करेंगे क्योंकि वह liहै जो उपयोगकर्ता के लिए दृश्य बदलता है और फलस्वरूप disabledकक्षा होनी चाहिए ।

— जारेड

Answer 4

मुझे लगता है कि सबसे अच्छा समाधान सीएसएस के साथ अक्षम है। आप एक नए वर्ग को परिभाषित करते हैं और आप उस पर माउस घटनाओं को बंद कर देते हैं:

.disabledTab{
    pointer-events: none;
}

और फिर आप इस वर्ग को वांछित ली तत्व में असाइन करते हैं:

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

आप jQuery के साथ वर्ग को भी जोड़ / हटा सकते हैं। उदाहरण के लिए, सभी टैब को अक्षम करने के लिए:

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

यहाँ एक उदाहरण है: jsFiddle

Comments

thnx @hotzu u ने मेरा दिन आसान बना दिया .. :)

— गौरव सिंह

मैं दृढ़ता से उसके खिलाफ सिफारिश करूंगा। चूंकि सीएसएस केवल समाधान टैब को क्लिक करने योग्य बनाता है। यदि उन क्लिक्स के लिए अन्य ईवेंट हैं, तो उन्हें निष्पादित किया जाएगा, जो वांछित परिणाम नहीं है। (मुझे लगता है?)

— देहाती

मेरे मामले में, यह चाल चली। मैंने कई टैब से मिलकर एक फॉर्म बनाया। अगले टैब पर जाना एक बटन के माध्यम से किया जाता है, जो जाने के लिए टैब पर एक क्लिक-इवेंट को ट्रिगर करता है। इसलिए क्लिक्स को पूरी तरह से अक्षम करना मेरे लिए कोई विकल्प नहीं है, लेकिन टैब्स से पॉइंटर घटनाओं को हटाना सिर्फ मेरी जरूरत थी।

— सेबस्टियन

Answer 5

कोई जरूरत नहीं, जेकरी, बस एक लाइन सीएसएस

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

Comments

मुझे यह करना पड़ा। li.disabled (not li.disabled a)

— Daniel

Answer 6

इसके अलावा, मैं निम्नलिखित समाधान का उपयोग कर रहा हूं:

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

अब आप केवल पैरंट ली और टैब में 'अक्षम' वर्ग जोड़ रहे हैं और काम नहीं करता है।

Answer 7

पुराना सवाल है लेकिन इसने मुझे सही दिशा में आने का इशारा किया है। जिस विधि के लिए मैं गया था वह अक्षम वर्ग को ली में जोड़ना था और फिर मेरी जावास्क्रिप्ट फ़ाइल में निम्न कोड जोड़ा गया।

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

यह किसी भी लिंक को अक्षम कर देगा जहां ली के पास विकलांग वर्ग है। टोटस के जवाब के समान। लेकिन अगर उपयोगकर्ता हर बार किसी भी टैब लिंक पर क्लिक करता है और यह रिटर्न का उपयोग नहीं करता है तो यह नहीं चलेगा।

उम्मीद है कि यह किसी के लिए उपयोगी होगा!

Comments

अच्छा! लेकिन e.stventDefault () e.stopImmediatePropagation () से पहले की जरूरत है

— meuwka

Answer 8

मेरे उपयोग के लिए, सबसे अच्छा समाधान यहाँ कुछ उत्तरों का मिश्रण था, जो हैं:

• जोड़ रहा है disabledकक्षा को ली में मैं अक्षम करना चाहता हूं

• जेएस के इस टुकड़े को जोड़ें:

     `$(".nav .disabled>a").on("click", function(e) {
          e.preventDefault();
          return false;
      });`

• यदि आप चाहते हैं कि बूटस्ट्रैप आपके कोड के साथ बिल्कुल भी हस्तक्षेप न करे, तो आप डेटा-टॉगल = "टैब" विशेषता को भी हटा सकते हैं।

**** नोट **: ** जेएस कोड यहां महत्वपूर्ण है, भले ही आप डेटा-टॉगल को हटा दें क्योंकि अन्यथा, यह आपके URL को इसमें #your-idमूल्य जोड़कर अपडेट करेगा , जिसकी अनुशंसा नहीं की गई है क्योंकि आपका टैब अक्षम है। इस प्रकार पहुँचा नहीं जाना चाहिए।

Answer 9

केवल सीएसएस के साथ , आप दो सीएसएस कक्षाओं को परिभाषित कर सकते हैं।

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

Answer 10

मान लीजिए, यह आपका TAB है और आप इसे अक्षम करना चाहते हैं

<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>

तो आप इस टैब को डायनामिक सीएसएस जोड़कर भी निष्क्रिय कर सकते हैं

$('#groups').css('pointer-events', 'none')

Answer 11

जेम्स के जवाब के अलावा:

यदि आपको लिंक उपयोग को अक्षम करने की आवश्यकता है

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

Answer 12

मैंने सभी सुझाए गए उत्तरों की कोशिश की, लेकिन आखिरकार मैंने इसे इस तरह से काम किया

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

Answer 13

मेरे लिए कोई भी जवाब काम नहीं करता है। निकालें data-toggle="tab"से aसक्रिय करने से रोकता है टैब, लेकिन यह भी कहते हैं#tabId यूआरएल के लिए हैश। यह मेरे लिए अस्वीकार्य है। क्या अस्वीकार्य भी जावास्क्रिप्ट का उपयोग कर रहा है।

क्या काम करता है disabledवर्ग को इसमें जोड़ा जाता है liऔर hrefइसकी विशेषता को हटा दिया जाता है a।

Comments

अब जब मैं आगे पढ़ता हूं, तो यह भी मूल रूप से एक ही सटीक उत्तर है जैसे @Scott Stafford, जिसने 2 साल पहले इसका उत्तर दिया था ...

— जिम

Answer 14

मेरे टैब पैनलों में थे, इसलिए मैंने टैब एंकर में एक वर्ग = 'अक्षम' जोड़ दिया

जावास्क्रिप्ट में मैंने जोड़ा:

$(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;
            }
        }
    }
}

Answer 15

इससे बचने के लिए सबसे आसान और साफ उपाय टैग में जोड़ रहा 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

Answer 16

आप disabledनिम्न के रूप में नव-आइटम के बच्चे को वर्ग जोड़कर बूटस्ट्रैप 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>

Answer 17

यहाँ मेरा प्रयास है। टैब को अक्षम करने के लिए:

1. टैब के LI में "अक्षम" वर्ग जोड़ें;
2. 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);