Las pestañas se utilizan para crear varias secciones en una página web que se pueden intercambiar, como un acordeón. Ayuda a agrupar contenido y ver contenido de un grupo específico a la vez.
Las pestañas se crean siguiendo un marcado específico que es el siguiente:
- Las pestañas deben encerrarse dentro de una lista ordenada o una lista desordenada
- Cada encabezado de pestaña debe envolverse individualmente en un elemento de lista y una etiqueta anclada encerrada con un atributo href que especifica el contenido de cada panel de pestaña.
- Cada panel de pestañas puede estar vacío, pero debe tener su propia identificación correspondiente al nombre con hash ingresado en el elemento ancla de la pestaña asociada.
Los contenidos dentro de un panel de pestañas se pueden definir en la misma página o se pueden cargar a través de Ajax, ambos son manejados por el atributo href asociado con la etiqueta de anclaje de ese panel.
A continuación, escribimos un código para una pestaña simple de 4 paneles usando jquery UI.
Las pestañas se especifican en una etiqueta div con una identificación. La identificación de la cual se especifica dentro del código jquery. Aquí hemos elegido la segunda pestaña como la pestaña predeterminada que se elegirá cuando se abra la página web. Puede cambiarlo especificando un valor diferente en la opción activa .
Nota: Las pestañas están indexadas a partir de «0».
Los siguientes ejemplos ilustran las pestañas jQuery:
Ejemplo 1: este código de ejemplo es una pestaña jquery simple, todas las pestañas son evaluables.
- Programa:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#geeks a:hover{color: lime;background: gray;}</style><body><br><br><divid="geeks"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>GeeksforGeeks</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$("#geeks").tabs({active: 0})})</script></body></html> - Producción:
Ejemplo 2: Manteniendo todas las pestañas cerradas de forma predeterminada, también puede optar por mantener todas las pestañas cerradas de forma predeterminada. Para hacer esto, usamos la opción Plegable y establecemos su valor en «Verdadero» y establecemos el valor de la opción activa en falso.
- Programa:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#geeks a:hover{color: lime;background: gray;}</style><body><br><br><divid="geeks"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>GeeksforGeeks</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$("#geeks").tabs({active: false,collapsible: true})})</script></body></html> - Producción:
Ejemplo 3: En este ejemplo deshabilitaremos las pestañas. Podemos elegir deshabilitar pestañas específicas o todas las pestañas usando la opción de deshabilitar . Primero, deshabilitamos todas las pestañas para las que establecemos el valor «Verdadero» para la opción de deshabilitar.
- Programa:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#geeks a:hover{color: lime;background: gray;}</style><body><br><br><divid="geeks"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>GeeksforGeeks</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$( "#geeks" ).tabs({disabled:true})})</script></body></html> - Producción:
Ejemplo 4: En este ejemplo deshabilitaremos algunas pestañas específicas. En el siguiente código, deshabilitamos la primera y la tercera pestaña (0 y 2 en términos de indexación):
- Programa:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#geeks a:hover{color: lime;background: gray;}</style><body><br><br><divid="geeks"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>GeeksforGeeks</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$( "#geeks" ).tabs({active: 1,disabled:[0, 2]})})</script></body></html> - Producción:
Ejemplo 5: podemos elegir qué elemento abrir de forma predeterminada, también por defecto, el evento de clic del mouse abre la pestaña, también cambiaremos esto a Mouse-hover para abrir o activar esa pestaña
- Programa:
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#geeks a:hover{color: lime;background: gray;}</style><body><br><br><divid="geeks"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>GeeksforGeeks</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$( "#geeks" ).tabs({event:'mouseover'})})</script></body></html> - Producción:
Ejemplo 6: En este ejemplo, cambiaremos la altura de la página de la pestaña según el contenido de esa pestaña. Para hacer eso, se nos pedirá que definamos la altura mínima lo más corta que pueda definir. Y la propiedad de desbordamiento que aumentará la altura de la página de pestañas según el contenido.
- Programa:
-
<html><head><linkhref=rel='stylesheet'></head><style>b{float: right;margin: 7px;color: lime;}#geeks a:hover{color: lime;background: gray;}</style><body><br><br><divid="geeks"><ul><li><ahref="#Algorithms">Algorithms</a></li><li><ahref="#Data_Structure">Data Structure</a></li><li><ahref="#Practice">Practice</a></li><li><ahref="#interview">interview</a></li><b>GeeksforGeeks</b></ul><divid='Algorithms'><p>The answer to this is simple, we can have all theabove things only if we have performance. Soperformance is like currency through which we canbuy all the above things. Another reasonfor studying performance is – speed is fun!</p></div><divid='Data_Structure'><p>For example, let us say, we want to store marks ofall students in a class, we can use an array to storethem. This helps in reducing the use of number ofvariables as we don’t need to create a separatevariable for marks of every subject. All marks canbe accessed by simply traversing the array.</p></div><divid='Practice'><p>Asymptotic Analysis is the big idea that handlesabove issues in analyzing algorithms. In AsymptoticAnalysis, we evaluate the performance of an algorithmin terms of input size (we don’t measure the actualrunning time). We calculate, how does the time(or space) taken by an algorithm increases withthe input size.</p></div><divid='interview'><p>Also, in Asymptotic analysis, we always talk aboutinput sizes larger than a constant value. It mightbe possible that those large inputs are never givento your software and an algorithm which isasymptotically slower, always performs better foryour particular situation. So, you may end up choosingan algorithm that is Asymptotically slower but fasterfor your software.</p></div></div><scriptsrc=</script><scriptsrc=</script><script>$(document).ready(function() {$("#geeks").tabs().css({'min-height': '100px','overflow': 'auto'});})</script></body></html> - Producción:
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA