To disable a tab, we can remove the attribute : data-toggle=”tab” from the tab part enclosed under ‘a’ element.
Further we can add the class .disabled to the parent list item element to make it look visually disabled. (like class=”disabled” inside list item)
To show a case of disabling tabs, first, we go through an example with tabs enabled.
And here is the unordered list section to demonstrate tab disabling, for a direct comparison:
Considering the code for the toggle-able tabs above, below is an example of disabling one tab, making one tab visually disabled and both disabling a tab and making it look visually disabled:
In the code for disabling tabs, we did not alter the first list item (with text ‘Algo’), (to show a case of tabs enabled) and hence it is both clickable/toggle-able and appears without any visual hindrance.
For the second list item (with text ‘DS’) we removed the ‘ data-toggle=”tab” ‘ part and hence this tab becomes non-toggle-able and nothing happens if we try to click it.
For the third list item (with text ‘Languages’) we add class .disabled (class=”disabled”) to our list item so that it becomes visually disabled, i.e. shows a disabled icon when we hover our cursor over it.
However, note that since ‘ data-toggle=”tab” ‘part inside ‘a’ is still there, this tab is toggle-able and can be clicked.
For the fourth list item (with text ‘Interview’) we add disabled class inside list item and also remove the ‘ data-toggle=”tab” ‘ part. This makes the tab both non-toggle-able/click-disabled (when we click) and visually disabled. This would be the case of making it completely disabled.
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.