คุณสามารถปิดการใช้งานแท็บใน Bootstrap 2.0 เช่นเดียวกับที่คุณสามารถปิดใช้งานปุ่มได้หรือไม่?
คุณสามารถปิดการใช้งานแท็บใน Bootstrap 2.0 เช่นเดียวกับที่คุณสามารถปิดใช้งานปุ่มได้หรือไม่?
คำตอบ:
คุณสามารถลบdata-toggle="tab"
แอตทริบิวต์ออกจากแท็บได้เนื่องจากมีการเชื่อมต่อโดยใช้เหตุการณ์สด / ผู้ร่วมประชุม
class="disabled"
ทำงานคาดว่าเป็น.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
ณ 2.1 จากเอกสาร bootstrap ที่http://twitter.github.com/bootstrap/components.html#navsคุณสามารถทำได้
สถานะปิดใช้งาน
สำหรับส่วนประกอบการนำทางใด ๆ (แท็บยาเม็ดหรือรายการ) ให้เพิ่ม. ปิดการใช้งานสำหรับลิงก์สีเทาและไม่มีเอฟเฟกต์โฮเวอร์ อย่างไรก็ตามลิงก์จะยังคงคลิกได้เว้นแต่คุณจะลบแอตทริบิวต์ 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
.nav-tabs li.disabled a {
pointer-events: none;
}
นอกจากนี้ฉันกำลังใช้วิธีแก้ปัญหาต่อไปนี้:
$('a[data-toggle="tab"]').on('click', function(){
if ($(this).parent('li').hasClass('disabled')) {
return false;
};
});
ตอนนี้คุณเพิ่งเพิ่มคลาส 'ปิดการใช้งาน' ไปยังหลักและแท็บไม่ทำงานและกลายเป็นสีเทา
คำถามเก่า แต่มันชี้ให้ฉันไปในทิศทางที่ถูกต้อง วิธีที่ฉันใช้คือเพิ่มคลาสปิดใช้งานลงใน li จากนั้นเพิ่มรหัสต่อไปนี้ในไฟล์ Javascript ของฉัน
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});
การดำเนินการนี้จะปิดการใช้งานลิงก์ใด ๆ ที่ li มีคลาสปิดการใช้งาน คล้ายกับคำตอบของ totas แต่จะไม่ทำงานหากทุกครั้งที่ผู้ใช้คลิกลิงก์แท็บใด ๆ และไม่ใช้ return false
หวังว่าจะเป็นประโยชน์กับใครบางคนนะ!
สำหรับการใช้งานของฉันทางออกที่ดีที่สุดคือการผสมผสานของคำตอบบางส่วนที่นี่ซึ่ง ได้แก่ :
disabled
คลาสใน li ฉันต้องการปิดการใช้งานเพิ่ม JS ชิ้นนี้:
`$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});`
คุณยังสามารถลบแอตทริบิวต์ data-toggle = "tab" ได้หากคุณต้องการให้ Bootstrap ไม่รบกวนโค้ดของคุณเลย
**** หมายเหตุ **: ** โค้ด JS ที่นี่มีความสำคัญแม้ว่าคุณจะลบ data-toggle ออกเพราะมิฉะนั้นจะอัปเดต URL ของคุณโดยการเพิ่ม#your-id
ค่าซึ่งไม่แนะนำเนื่องจากแท็บของคุณถูกปิดใช้งาน จึงไม่ควรเข้าถึง
ด้วย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')
นอกเหนือจากคำตอบของ 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');
ฉันลองใช้คำตอบที่แนะนำทั้งหมดแล้ว แต่ในที่สุดฉันก็ทำได้เช่นนี้
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 target สำหรับ expage.apsx#Home
"disabled"
คลาสในการ<li>
AND ลบhref
คุณสามารถปิดใช้งานแท็บใน 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>
นี่คือความพยายามของฉัน ในการปิดใช้งานแท็บ:
รหัส:
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);