আপনি কি বুটস্ট্র্যাপে ট্যাবগুলি অক্ষম করতে পারবেন?

Question

আপনি বাটনগুলি অক্ষম করতে পারার মতো বুটস্ট্র্যাপ 2.0 এ ট্যাবগুলি অক্ষম করতে পারেন?

Answer 1

data-toggle="tab"সরাসরি / প্রতিনিধি ইভেন্টগুলি ব্যবহার করে আপনি ট্যাবটি থেকে বৈশিষ্ট্যটি সরিয়ে ফেলতে পারেন

Comments

ধন্যবাদ একটি ট্রিট কাজ করেছে, এছাড়াও সিএসএস যোগ "কর্সার: নন-ড্রপ;" কার্সারের জন্য সুতরাং ব্যবহারগুলি জানেন যে তারা কেন এটি ক্লিক করতে পারে না

— arbme

কার্সার: অনুমোদিত নয়; এই ক্ষেত্রে আরও উপযুক্ত। আপনি যদি না আসলেই টানুন এবং ছাড়ছেন।

— ক্রিস্টোফ গিয়ার্স

বা লি

— তে

আপনি উপরের উভয় পরামর্শ ব্যবহার করতে হবে: <লি> এ "অক্ষম" শ্রেণী যোগ করুন এবং ট্যাব থেকে সরান ডেটা-toogle বা href বৈশিষ্ট্যটির

— Scabbia

আমি কেবল এই সিএসএসটি যুক্ত করেছি এবং এখন class="disabled"প্রত্যাশা অনুযায়ী কাজ করি.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }

— ইফেফ

Answer 2

২.১ হিসাবে, বুটস্ট্র্যাপ ডকুমেন্টেশন থেকে http://twitter.github.com/bootstrap/components.html#navs এ আপনি করতে পারেন।

অক্ষম রাষ্ট্র

যেকোন নাভির উপাদানগুলির জন্য (ট্যাব, পিলস বা তালিকা), ধূসর লিঙ্কগুলির জন্য .d অক্ষম করুন এবং কোনও হোভার ইফেক্ট নেই। লিঙ্কগুলি ক্লিকযোগ্য হবে, তবে আপনি যদি href বৈশিষ্ট্যটি সরিয়ে না দেন। বিকল্পভাবে, আপনি এই ক্লিকগুলি প্রতিরোধ করতে কাস্টম জাভাস্ক্রিপ্ট প্রয়োগ করতে পারেন।

বৈশিষ্ট্য যুক্ত করার জন্য আলোচনার জন্য https://github.com/twitter/bootstrap/issues/2764 দেখুন ।

Comments

এটি মূল কার্যকারিতাগুলির মধ্যে একটি এবং এটি

— boggles

এটা তোলে v3 এর বাস্তবায়িত হয়

— Jeroen কে

হ্যাঁ তবে লিঙ্কগুলি এখনও ক্লিকযোগ্য।

— সোভালদা

ঠিক ঠিক, এখন পর্যন্ত কার্যকর সমাধানটি হ'ল ডেটা-টগল বৈশিষ্ট্যটি সরিয়ে ফেলা।

— সিরিল এন।

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 আমি দেখছি না কেন আমি এই কাজ করব?

— টোটাস

পুরানো প্রশ্ন, তবে এটি যা পেয়েছিলাম তাই আমি এটি যুক্ত করছি। আপনি এটি পরীক্ষা করে নেবেন কারণ liএটিই ব্যবহারকারীর ভিজ্যুয়াল পরিবর্তন করে এবং ফলস্বরূপ disabledক্লাসটি কী হওয়া উচিত ।

— জেরেদ

Answer 4

আমি মনে করি সেরা সমাধানটি সিএসএস দিয়ে অক্ষম করা। আপনি একটি নতুন শ্রেণী নির্ধারণ করেছেন এবং আপনি এটিতে মাউস ইভেন্টগুলি বন্ধ করেছেন:

.disabledTab{
    pointer-events: none;
}

এবং তারপরে আপনি এই ক্লাসটি পছন্দসই লি উপাদানটিতে অর্পণ করুন:

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

আপনি jQuery এর সাথে ক্লাস যুক্ত / মুছে ফেলতে পারেন। উদাহরণস্বরূপ, সমস্ত ট্যাব অক্ষম করতে:

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

এখানে একটি উদাহরণ: jsFizz

Comments

thnx @hotzu আপনি আমার দিনটি সহজ করে দিয়েছিলেন .. :)

— গৌরব সিং

আমি এর বিরুদ্ধে দৃ .়ভাবে সুপারিশ করব। যেহেতু একটি CSS কেবলমাত্র সমাধান ট্যাবগুলিকে ক্লিকযোগ্য করে ছাড়বে leaves যদি এই ইভেন্টগুলিতে অন্য ইভেন্টগুলি শুনছে তবে তাদের সম্পাদন করা হবে, এটি পছন্দসই ফলাফল নয়। (আমি অনুমান করি?)

— ডেমেন্টিক

আমার ক্ষেত্রে, এটি কৌশলটি করেছে। আমি একাধিক ট্যাব সমন্বিত একটি ফর্ম তৈরি করেছি। পরবর্তী ট্যাবে যাওয়া বোতামের মাধ্যমে করা হয় যা ট্যাবে ক্লিক-ইভেন্টে যাওয়ার জন্য ট্রিগার করে। সুতরাং ক্লিকগুলি সম্পূর্ণরূপে অক্ষম করা আমার পক্ষে বিকল্প নয়, তবে ট্যাবগুলি থেকে পয়েন্টার ইভেন্টগুলি অপসারণ করা আমার প্রয়োজনীয় ছিল।

— সেবাস্তিয়ান

Answer 5

দরকার নেই কোনও জ্যাকোয়ারি, কেবল একটি লাইন সিএসএস

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

Comments

আমাকে এটি li.disabled (li.dis अक्षम a) এ করতে হয়েছিল

— ড্যানিয়েল

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.stopImediaPropagation () এর আগে e.preventDefault () দরকার

— meuwka

Answer 8

আমার ব্যবহারের জন্য, সেরা সমাধানটি এখানে কয়েকটি উত্তরগুলির মিশ্রণ ছিল, যা হ'ল:

• যোগ করার পদ্ধতি disabledলি আমি অক্ষম করতে চান বর্গ

• এই জেএস টুকরা যোগ করুন:

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

• আপনি যদি বুটস্ট্র্যাপ আপনার কোডের সাথে হস্তক্ষেপ না করতে চান তবে আপনি ডেটা-টগল = "ট্যাব" বৈশিষ্ট্যটিও সরাতে পারেন।

**** দ্রষ্টব্য **: ** এখানে জেএস কোডটি গুরুত্বপূর্ণ, আপনি ডেটা-টগল অপসারণ করলেও অন্যথায়, এটি আপনার URL টি এতে #your-idমান যুক্ত করে আপডেট করবে, যা প্রস্তাবিত নয় কারণ আপনার ট্যাব অক্ষম করা হয়েছে, এইভাবে অ্যাক্সেস করা উচিত নয়।

Answer 9

সঙ্গে শুধুমাত্র 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>

এটি একটি এইচটিএমএল টেমপ্লেট। কেবলমাত্র প্রয়োজনীয় জিনিসটি হল আপনার পছন্দের তালিকা আইটেমটিতে ক্লাস সেট করা।

<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

মনে করুন, এটি আপনার ট্যাব এবং আপনি এটি অক্ষম করতে চান

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

সুতরাং আপনি গতিশীল CSS যুক্ত করে এই ট্যাবটি অক্ষম করতে পারেন

$('#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 URL- এ হ্যাশ। এটি আমার কাছে অগ্রহণযোগ্য। যা অগ্রহণযোগ্য তা হ'ল জাভাস্ক্রিপ্ট ব্যবহার করা।

কাজটি কী করে তা disabledক্লাসে যুক্ত হয় liএবং এতে থাকা hrefবৈশিষ্ট্যগুলি মুছে ফেলা হয় a।

Comments

এখন যখন আমি আরও পড়লাম, এটিও মূলত @ স্কট স্টাফোর্ডের উত্তর হিসাবে ঠিক একই উত্তর, যিনি ২ বছর আগে এর উত্তর দিয়েছিলেন ...

— জিম

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 প্রাক্তন জন্য সূরা লক্ষ্য সঙ্গে সংযোজন পরার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. ট্যাব এর এলআইতে "অক্ষম" শ্রেণি যুক্ত করুন;
2. এলআই> এ থেকে 'ডেটা-টগল' বৈশিষ্ট্যটি সরান;
3. এলআই> এ এর ​​'ক্লিক' ইভেন্টটি দমন করুন

কোড:

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