In version 2.1 of bootstrap, you are now able to disable nav components as per the documentation found at .

Grayed-out Links

To disable any tabs, pills, or list navigation component, simply add .disabled class for gray links with no hover effects. The links will still be clickable, unless you remove the href attribute. Another option would be to use custom JavaScript to restrict these clicks.

Visit https://github.com/twitter/bootstrap/issues/2764 for more information on the added feature discussion.

To prevent clicks on disabled links, I included the following Javascript code:

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

One effective approach I believe is to use CSS for disabling elements. Simply create a new class where you deactivate mouse events:

.disabledElement{
    pointer-events: none;
}

Then, apply this class to the specific element that you want to disable:

<div class="disabled disabledElement"><p>Content here</p></div>

You can also utilize jQuery to easily add or remove classes. For instance, to disable all elements within a certain container:

$("div.container").removeClass('active').addClass('disabledElement');

For a working example, check out this demo on jsFiddle.

No Jquery Required, Simply Use One Line of CSS

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

My current approach involves the following:

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

By simply adding the 'disabled' class to the parent li element, the tab functionality is disabled and appears grayed out.

Even though this question is old, it helped steer me in the right direction. My approach was to apply the disabled class to the li element and then insert the following code into my JavaScript file.

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

With this code, any link within an li element with the disabled class will be disabled. It's somewhat similar to totas's answer, but it won't trigger the if statement every time a tab link is clicked, and it doesn't rely on return false.

I hope this snippet proves helpful to someone!

After trying out various solutions, I found that the most effective approach for my needs was to combine elements from different suggestions provided here. Here's what worked for me:

• To disable a specific list item, simply add the disabled class to it.
• Include the following JavaScript code snippet:

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

• If desired, you can also remove the data-toggle="tab" attribute to prevent Bootstrap from interfering with your custom code entirely.

IMPORTANT NOTE: The provided JS code is crucial, even if you opt to eliminate the data-toggle attribute. Failure to include this script may result in unwanted URL modifications by appending the #your-id value, which is not recommended since the corresponding tab is disabled and should not be accessible.

By using only css, you have the ability to define two distinct css classes.

<style type="text/css">
    /* The cursor is set to not-allowed over elements with pointer-events:none,
    creating a more user-friendly experience. */
    .disabledTab {
        cursor: not-allowed;
    }
    /* Clicks are disabled and opacity is reduced. */
    li.disabledTab > a[data-toggle="tab"] {
        pointer-events: none;
        filter: alpha(opacity=65);
        -webkit-box-shadow: none;
        box-shadow: none;
        opacity: .65;
    }
</style>

This template is in html format. Simply assign the desired class to your preferred list item.

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

Imagine if this is the TAB you wish to deactivate

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

To disable this specific tab, you can apply custom CSS dynamically

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

Apart from James's response:

If you want to deactivate the link, use the following code

$('a[data-toggle="tab"]').addClass('disabled');

If you wish to stop a disabled link from loading the tab content

$('a[data-toggle="tab"]').click(function(e){

            if($this.hasClass("disabled")){

                e.preventDefault();

                e.stopPropagation();

                e.stopImmediatePropagation();

                return false;

            }
}

If you need to enable the link again

$('a[data-toggle="tab"]').removeClass('disabled');

To deactivate a tab in Bootstrap 4, simply include the disabled class within the nav-item element like this:

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

After trying out all the recommended solutions, I eventually managed to get it working using this method:

if (false) //custom condition
{
    $("a[data-toggle='tab'").prop('disabled', true);
    $("a[data-toggle='tab'").each(function () {
        $(this).prop('data-href', $(this).attr('href')); //store 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');
}
//additional message for disabled tab indication
$("a[data-toggle='tab'").click(function(){
   alert('Tab is disabled for a reason');
});

I have tried all the solutions provided, but unfortunately none of them work in my case. When I remove data-toggle="tab" from the a element, it prevents the tab from activating but it also adds the #tabId hash to the URL, which is not acceptable for me. Additionally, I do not want to use javascript.

After experimenting further, I found that adding the disabled class to the li and removing the href attribute of its containing a element actually works as a workaround solution.

After organizing my tabs into panels, I decided to make the inactive tabs disabled by adding a class called 'disabled' to the anchor tags.

To handle this functionality in JavaScript, I included the following code:

$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    if ($(this).hasClass('disabled')){
        e.preventDefault();
        return false;
    }
})

For styling in Less, I made these adjustments:

.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;
            }
        }
    }
}

To prevent this issue easily and effectively, simply include onclick="return false;" within the a tag.

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

• Simply using "cursor:no-drop;" changes the appearance of the cursor to disabled, but it remains clickable and will still append the URL with the target reference like page.aspx#Home
• Avoid the need for adding a "disabled" class to the <li> element and remove the href attribute altogether