How to disable tabs in Bootstrap ?
Last Updated :
24 Jun, 2021
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.
html
< ul class = "nav nav-tabs" >
< li class = "active" >< a data-toggle = "tab" href = "#home" >Algo</ a ></ li >
< li >< a data-toggle = "tab" href = "#menu1" >DS</ a ></ li >
< li >< a data-toggle = "tab" href = "#menu2" >Languages</ a ></ li >
< li >< a data-toggle = "tab" href = "#menu3" >Interview</ a ></ li >
</ ul >
|
And here is the unordered list section to demonstrate tab disabling, for a direct comparison:
html
< ul class = "nav nav-tabs" >
< li class = "active" >< a data-toggle = "tab" href = "#home" >Algo</ a ></ li >
< li >< a href = "#menu1" >DS</ a ></ li >
< li class = "disabled" >< a data-toggle = "tab" href = "#menu2" >Languages</ a ></ li >
< li class = "disabled" >< a href = "#menu3" >Interview</ a ></ li >
</ ul >
|
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:
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container"
style = "color:green" >
< h2 >GeeksforGeeks</ h2 >
< ul class = "nav nav-tabs" >
< li class = "active" >
< a data-toggle = "tab" href = "#home" >Algo</ a >
</ li >
< li >< a href = "#menu1" >DS</ a ></ li >
< li class = "disabled" >
< a data-toggle = "tab" href = "#menu2" >
Languages
</ a >
</ li >
< li class = "disabled" >
< a href = "#menu3" >
Interview
</ a >
</ li >
</ ul >
< div class = "tab-content" >
< div id = "home"
class = "tab-pane fade in active" >
< h3 >Algo</ h3 >
< p >Here you can find all sorts of Algorithms
with explanation and problems based on them!
</ p >
</ div >
< div id = "menu1" class = "tab-pane fade" >
< h3 >DS</ h3 >
< p >Here you can find all sorts of Data
Structures explained and problems wherein
we need to use those!</ p >
</ div >
< div id = "menu2" class = "tab-pane fade" >
< h3 >Languages</ h3 >
< p >Here you can find all different scripting/query
languages!
</ p >
</ div >
< div id = "menu3" class = "tab-pane fade" >
< h3 >Interview</ h3 >
< p >Here, you can find 'Interview Experiences'
for all the companies!
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
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.
Share your thoughts in the comments
Please Login to comment...