Câu trả lời:
Bạn có thể xóa data-toggle="tab"thuộc tính khỏi tab khi nó được nối bằng các sự kiện trực tiếp / ủy nhiệm
class="disabled"các công trình như mong đợi.nav.nav-tabs > li.disabled { pointer-events: none; a { color: silver; } }
Kể từ 2.1, từ tài liệu bootstrap tại http://twitter.github.com/bootstrap/components.html#navs , bạn có thể.
Trạng thái vô hiệu hóa
Đối với bất kỳ thành phần điều hướng nào (tab, thuốc hoặc danh sách), hãy thêm .disables cho các liên kết màu xám và không có hiệu ứng di chuột. Liên kết sẽ vẫn có thể nhấp, tuy nhiên, trừ khi bạn xóa thuộc tính href. Ngoài ra, bạn có thể triển khai JavaScript tùy chỉnh để ngăn những nhấp chuột đó.
Xem https://github.com/twitter/bootstrap/issues/2764 để biết thêm tính năng thảo luận.
Tôi đã thêm Javascript sau đây để ngăn nhấp vào liên kết bị vô hiệu hóa:
$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
if ($(this).hasClass("disabled")) {
e.preventDefault();
return false;
}
});
disabledlớp vào thành liphần và sau đó thêm javascript mà bạn đã chỉ định ngoại trừ điều kiện bạn đang kiểm tra sẽ là : if ($(this).parent().hasClass('disabled')) {..}.
lilà những gì thay đổi hình ảnh cho người dùng và do đó là những gì nên có disabledlớp.
tôi nghĩ rằng giải pháp tốt nhất là vô hiệu hóa với css. Bạn xác định một lớp mới và bạn tắt các sự kiện chuột trên nó:
.disabledTab{
pointer-events: none;
}
Và sau đó bạn gán lớp này cho phần tử li mong muốn:
<li class="disabled disabledTab"><a href="#"> .... </a></li>Bạn cũng có thể thêm / xóa lớp bằng jQuery. Ví dụ: để tắt tất cả các tab:
$("ul.nav li").removeClass('active').addClass('disabledTab');Đây là một ví dụ: jsFiddle
.nav-tabs li.disabled a {
pointer-events: none;
}Câu hỏi cũ nhưng nó chỉ cho tôi đi đúng hướng. Phương pháp tôi đã thực hiện là thêm lớp bị vô hiệu hóa vào li và sau đó thêm đoạn mã sau vào tệp Javascript của tôi.
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});Điều này sẽ vô hiệu hóa bất kỳ liên kết nào trong đó li có một lớp bị vô hiệu hóa. Tương tự như câu trả lời của totas nhưng nó sẽ không chạy nếu mỗi khi người dùng nhấp vào bất kỳ liên kết tab nào và nó không sử dụng trả về false.
Hy vọng nó sẽ hữu ích cho ai đó!
Đối với việc sử dụng của tôi, giải pháp tốt nhất là kết hợp một số câu trả lời ở đây, đó là:
disabledlớp vào li tôi muốn tắtThêm đoạn mã này:
`$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});`Bạn thậm chí có thể xóa thuộc tính data-toggle = "tab" nếu bạn muốn Bootstrap hoàn toàn không can thiệp vào mã của bạn.
**** LƯU Ý **: ** Mã JS ở đây rất quan trọng, ngay cả khi bạn xóa chuyển đổi dữ liệu vì nếu không, nó sẽ cập nhật URL của bạn bằng cách thêm #your-idgiá trị vào đó, không được khuyến nghị vì tab của bạn bị vô hiệu hóa, do đó không nên được truy cập.
Chỉ với css , bạn có thể định nghĩa hai lớp 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>Đây là một mẫu html. Điều duy nhất cần thiết là đặt lớp thành mục danh sách ưa thích của bạn.
<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>Giả sử, đây là TAB của bạn và bạn muốn tắt nó
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>Vì vậy, bạn cũng có thể vô hiệu hóa tab này bằng cách thêm css động
$('#groups').css('pointer-events', 'none')Ngoài câu trả lời của James:
Nếu bạn cần phải vô hiệu hóa liên kết sử dụng
$('a[data-toggle="tab"]').addClass('disabled');Nếu bạn cần ngăn liên kết bị vô hiệu hóa tải tab
$('a[data-toggle="tab"]').click(function(e){
if($this.hasClass("disabled")){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}Nếu bạn cần không thể liên kết
$('a[data-toggle="tab"]').removeClass('disabled');Tôi đã thử tất cả các câu trả lời được đề xuất, nhưng cuối cùng tôi đã làm cho nó hoạt động như thế này
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');
});Không có câu trả lời nào phù hợp với tôi. Xóa data-toggle="tab"khỏi atab ngăn không cho kích hoạt, nhưng nó cũng thêm #tabIdbăm vào URL. Điều đó là không thể chấp nhận được với tôi. Điều cũng không thể chấp nhận được là sử dụng javascript.
Những gì không hoạt động được thêm disabledlớp vào livà loại bỏ hrefthuộc tính chứa nó a.
các tab của tôi nằm trong các bảng, vì vậy tôi đã thêm một lớp = 'bị vô hiệu hóa' vào neo tab
trong javascript tôi đã thêm:
$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if ($(this).hasClass('disabled')){
e.preventDefault();
return false;
}
})và để trình bày trong ít hơn tôi đã thêm:
.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;
}
}
}
}Giải pháp dễ dàng và sạch sẽ nhất để tránh điều này là thêm onclick="return false;"vào athẻ.
<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;"chỉ khiến con trỏ trông bị vô hiệu hóa, nhưng có thể nhấp được , Url được nối thêm với href đích cho expage.apsx#Home"disabled"lớp vào <li>VÀ loại bỏhref Bạn có thể vô hiệu hóa một tab trong bootstrap 4 bằng cách thêm lớp disabledvào phần con của mục điều hướng như sau
<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>Đây là nỗ lực của tôi. Để tắt một tab:
Mã số:
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);