Para deshabilitar una pestaña, podemos eliminar el atributo: data-toggle=”tab” de la parte de la pestaña encerrada bajo el elemento ‘a’ .
Además, podemos agregar la clase .disabled al elemento del elemento de la lista principal para que se vea visualmente deshabilitado . (como class=”disabled” dentro del elemento de la lista)
Para mostrar un caso de deshabilitación de pestañas, primero, veamos un ejemplo con pestañas habilitadas.
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>
Y aquí está la sección de la lista desordenada para demostrar la desactivación de pestañas, para una comparación directa:
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>
Teniendo en cuenta el código para las pestañas que se pueden alternar arriba, a continuación se muestra un ejemplo de cómo deshabilitar una pestaña, hacer que una pestaña se deshabilite visualmente y deshabilitar una pestaña y hacer que se vea visualmente deshabilitada:
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </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>
Producción:
En el código para deshabilitar las pestañas, no modificamos el primer elemento de la lista (con el texto ‘Algo’), (para mostrar un caso de pestañas habilitadas) y, por lo tanto, se puede hacer clic o alternar y aparece sin ningún obstáculo visual.
Para el segundo elemento de la lista (con el texto ‘DS’), eliminamos la parte ‘ data-toggle=”tab” ‘ y, por lo tanto, esta pestaña no se puede alternar y no sucede nada si intentamos hacer clic en ella.
Para el tercer elemento de la lista (con el texto ‘Idiomas’) agregamos class .disabled (class=”disabled”) a nuestro elemento de la lista para que se deshabilite visualmente, es decir, muestra un ícono deshabilitado cuando pasamos el cursor sobre él.
Sin embargo, tenga en cuenta que dado que ‘ data-toggle=”tab” ‘parte dentro de ‘a’ todavía está allí, esta pestaña se puede alternar y se puede hacer clic en ella.
Para el cuarto elemento de la lista (con el texto ‘Entrevista’), agregamos la clase deshabilitada dentro del elemento de la lista y también eliminamos la parte ‘ data-toggle=”tab” ‘. Esto hace que la pestaña no se pueda alternar/hacer clic en deshabilitar (cuando hacemos clic) y visualmente deshabilitada. Este sería el caso de hacerlo completamente inhabilitado.
Publicación traducida automáticamente
Artículo escrito por Anirban166 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA