คุณสามารถปิดการใช้งานแท็บใน Bootstrap ได้หรือไม่?


คำตอบ:


190

คุณสามารถลบdata-toggle="tab"แอตทริบิวต์ออกจากแท็บได้เนื่องจากมีการเชื่อมต่อโดยใช้เหตุการณ์สด / ผู้ร่วมประชุม


11
ขอบคุณที่ทำงานรักษาเพิ่ม css "cursor: no-drop;" สำหรับเคอร์เซอร์ดังนั้นการใช้จะรู้ว่าทำไมจึงคลิกไม่ได้
arbme

23
เคอร์เซอร์: ไม่อนุญาต; เหมาะสมกว่าในกรณีนี้ เว้นแต่คุณจะลากแล้วปล่อย
Christophe Geers

9
หรือเพิ่มคลาสคนพิการใน li
Pencilcheck

6
คุณต้องใช้คำแนะนำทั้งสองด้านบน: เพิ่มคลาส "ปิดการใช้งาน" เพื่อ <li> และลบ data-toogle หรือแอตทริบิวต์ href จากแท็บ
Scabbia

9
ฉันก็เพิ่ม CSS นี้และตอนนี้class="disabled"ทำงานคาดว่าเป็น.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
Effe

50

ณ 2.1 จากเอกสาร bootstrap ที่http://twitter.github.com/bootstrap/components.html#navsคุณสามารถทำได้

สถานะปิดใช้งาน

สำหรับส่วนประกอบการนำทางใด ๆ (แท็บยาเม็ดหรือรายการ) ให้เพิ่ม. ปิดการใช้งานสำหรับลิงก์สีเทาและไม่มีเอฟเฟกต์โฮเวอร์ อย่างไรก็ตามลิงก์จะยังคงคลิกได้เว้นแต่คุณจะลบแอตทริบิวต์ href หรือคุณสามารถใช้ JavaScript ที่กำหนดเองเพื่อป้องกันการคลิกเหล่านั้นได้

ดูhttps://github.com/twitter/bootstrap/issues/2764สำหรับฟีเจอร์เพิ่มการสนทนา


1
นี่เป็นหนึ่งในฟังก์ชันหลักและทำให้ฉันประหลาดใจว่ายังไม่ได้ใช้งาน
DS_web_developer

มีการใช้งานใน v3
Jeroen K

9
ใช่ แต่ลิงก์ยังคงคลิกได้
svlada

3
แน่นอนว่าโซลูชันที่ทำงานได้จนถึงตอนนี้คือการลบแอตทริบิวต์ data-toggle
Cyril N.

34

ฉันเพิ่ม Javascript ต่อไปนี้เพื่อป้องกันการคลิกลิงก์ที่ปิดใช้งาน:

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

9
ฉันคิดว่าการผสมผสานระหว่างสิ่งนี้กับการตอบสนองของ @ hotzu น่าจะเป็นคำตอบ คุณควรเพิ่มdisabledระดับไปที่องค์ประกอบแล้วเพิ่มจาวาสคริปต์ที่คุณระบุยกเว้นเงื่อนไขที่คุณต้องการจะตรวจสอบกับจะเป็น:li if ($(this).parent().hasClass('disabled')) {..}
im1dermike

@ im1dermike ฉันไม่เห็นว่าทำไมฉันจะทำแบบนี้?
totas

คำถามเก่า แต่เป็นสิ่งที่ฉันพบดังนั้นฉันจึงเพิ่มสิ่งนี้ คุณจะทำการตรวจสอบนั้นเพราะliสิ่งนี้คือสิ่งที่เปลี่ยนภาพสำหรับผู้ใช้และเป็นสิ่งที่ควรมีในdisabledคลาส
Jared

25

ฉันคิดว่าทางออกที่ดีที่สุดคือปิดการใช้งานด้วย css คุณกำหนดคลาสใหม่และคุณปิดเหตุการณ์ของเมาส์ในนั้น:

.disabledTab{
    pointer-events: none;
}

จากนั้นคุณกำหนดคลาสนี้ให้กับองค์ประกอบ li ที่ต้องการ:

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

คุณสามารถเพิ่ม / ลบคลาสด้วย jQuery ได้เช่นกัน ตัวอย่างเช่นหากต้องการปิดใช้งานแท็บทั้งหมด:

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

นี่คือตัวอย่าง: jsFiddle


thnx @hotzu u ทำให้วันของฉันง่ายขึ้น .. :)
Gaurav Singh

ฉันขอแนะนำอย่างยิ่งกับสิ่งนั้น เนื่องจากโซลูชัน css เท่านั้นทำให้แท็บสามารถคลิกได้ ในกรณีที่มีเหตุการณ์อื่นรออยู่สำหรับการคลิกเหล่านั้นพวกเขาจะถูกดำเนินการซึ่งไม่ใช่ผลลัพธ์ที่ต้องการ (ฉันเดา?)
Rafael Herscovici

ในกรณีของฉันนี่เป็นเคล็ดลับ ฉันสร้างฟอร์มที่ประกอบด้วยหลายแท็บ การไปที่แท็บถัดไปทำได้โดยใช้ปุ่มซึ่งจะทริกเกอร์เหตุการณ์คลิกบนแท็บเพื่อไปที่ ดังนั้นการปิดใช้งานการคลิกโดยสิ้นเชิงจึงไม่ใช่ตัวเลือกสำหรับฉัน แต่การลบเหตุการณ์ตัวชี้ออกจากแท็บเป็นเพียงสิ่งที่ฉันต้องการ
sebastian

19

ไม่จำเป็นต้องมี Jquery ใด ๆ CSS เพียงบรรทัดเดียว

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

1
ฉันต้องทำสิ่งนี้กับ li.disabled (ไม่ใช่ li.disabled a)
Daniel

10

นอกจากนี้ฉันกำลังใช้วิธีแก้ปัญหาต่อไปนี้:

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

ตอนนี้คุณเพิ่งเพิ่มคลาส 'ปิดการใช้งาน' ไปยังหลักและแท็บไม่ทำงานและกลายเป็นสีเทา


6

คำถามเก่า แต่มันชี้ให้ฉันไปในทิศทางที่ถูกต้อง วิธีที่ฉันใช้คือเพิ่มคลาสปิดใช้งานลงใน li จากนั้นเพิ่มรหัสต่อไปนี้ในไฟล์ Javascript ของฉัน

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

การดำเนินการนี้จะปิดการใช้งานลิงก์ใด ๆ ที่ li มีคลาสปิดการใช้งาน คล้ายกับคำตอบของ totas แต่จะไม่ทำงานหากทุกครั้งที่ผู้ใช้คลิกลิงก์แท็บใด ๆ และไม่ใช้ return false

หวังว่าจะเป็นประโยชน์กับใครบางคนนะ!


1
ดี! แต่ต้องใช้ e.preventDefault () ก่อน e.stopImmediatePropagation ()
meuwka

6

สำหรับการใช้งานของฉันทางออกที่ดีที่สุดคือการผสมผสานของคำตอบบางส่วนที่นี่ซึ่ง ได้แก่ :

  • การเพิ่มdisabledคลาสใน li ฉันต้องการปิดการใช้งาน
  • เพิ่ม JS ชิ้นนี้:

       `$(".nav .disabled>a").on("click", function(e) {
            e.preventDefault();
            return false;
        });`
    
  • คุณยังสามารถลบแอตทริบิวต์ data-toggle = "tab" ได้หากคุณต้องการให้ Bootstrap ไม่รบกวนโค้ดของคุณเลย

**** หมายเหตุ **: ** โค้ด JS ที่นี่มีความสำคัญแม้ว่าคุณจะลบ data-toggle ออกเพราะมิฉะนั้นจะอัปเดต URL ของคุณโดยการเพิ่ม#your-idค่าซึ่งไม่แนะนำเนื่องจากแท็บของคุณถูกปิดใช้งาน จึงไม่ควรเข้าถึง


4

ด้วย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>

2

สมมติว่านี่คือ 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')

1

นอกเหนือจากคำตอบของ James:

หากคุณต้องการปิดการใช้งานลิงค์ให้ใช้

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

0

ฉันลองใช้คำตอบที่แนะนำทั้งหมดแล้ว แต่ในที่สุดฉันก็ทำได้เช่นนี้

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

0

ไม่มีคำตอบใดที่เหมาะกับฉัน ลบออกdata-toggle="tab"จากaแท็บป้องกันไม่ให้เปิดใช้งาน แต่ยังเพิ่มไฟล์#tabIdแฮชให้กับ URL นั่นเป็นสิ่งที่ฉันยอมรับไม่ได้ สิ่งที่ยอมรับไม่ได้คือการใช้จาวาสคริปต์

สิ่งที่ไม่ทำงานจะเพิ่มdisabledระดับไปliและลบแอตทริบิวต์ของที่มีมันhrefa


ตอนนี้ฉันอ่านเพิ่มเติมแล้วนี่ก็เป็นคำตอบเดียวกันกับคำตอบจาก @Scott Stafford ที่ตอบเมื่อ 2 ปีก่อน ...
จิม

0

แท็บของฉันอยู่ในแผงควบคุมดังนั้นฉันจึงเพิ่ม 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;
            }
        }
    }
}

0

วิธีที่ง่ายและสะอาดที่สุดในการหลีกเลี่ยงปัญหานี้คือการเพิ่ม 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 target สำหรับ expage.apsx#Home
  • ไม่จำเป็นต้องเพิ่ม"disabled"คลาสในการ<li>AND ลบhref

0

คุณสามารถปิดใช้งานแท็บใน bootstrap 4 ได้โดยเพิ่มคลาสdisabledให้กับลูกของ nav-item ดังต่อไปนี้

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

-1

นี่คือความพยายามของฉัน ในการปิดใช้งานแท็บ:

  1. เพิ่มคลาส "ปิดการใช้งาน" ใน LI ของแท็บ
  2. ลบแอตทริบิวต์ 'data-toggle' จาก 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);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.