Las pestañas se pueden usar para mostrar grandes cantidades de contenido en una sola página de manera organizada. Podemos diseñar pestañas de una sola página usando HTML, CSS y JavaScript. Los elementos HTML se utilizan para diseñar la estructura de las pestañas y su contenido en párrafos. El estilo se realiza mediante CSS. Al hacer clic en cada botón de pestaña, las pestañas muestran su contenido respectivo. Esto se hace usando JavaScript.
Pestañas horizontales: el siguiente código demuestra la estructura HTML simple con pestañas y su contenido en forma de párrafo. Al hacer clic en cada pestaña, llama al método displayContent() implementado en el archivo «script.js» que se muestra a continuación.
Código HTML:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <h2 style="color:green"> GeeksforGeeks Horizontal tabs </h2> <!-- Link to each tab with onclick event --> <div id="tabsDiv"> <button class="linkClass" onclick= "displayContent(event, 'interview')"> Interview </button> <button class="linkClass" onclick= "displayContent(event, 'practice')"> Practice </button> <button class="linkClass" onclick= "displayContent(event, 'python')"> Python </button> <button class="linkClass" onclick= "displayContent(event, 'algorithms')"> Algorithms </button> <button class="linkClass" onclick= "displayContent(event, 'machine')"> Machine Learning </button> </div> <!-- Content for each HTML tab --> <div id="interview" class="contentClass"> <h3>Interview</h3> <p> Also, in Asymptotic analysis, we always talk about input sizes larger than a constant value. It might be possible that those large inputs are never given to your software and an algorithm which is asymptotically slower, always performs better for your particular situation. So, you may end up choosing an algorithm that is Asymptotically slower but faster for your software. </p> </div> <div id="practice" class="contentClass"> <h3>Practice</h3> <p> Asymptotic Analysis is the big idea that handles above issues in analyzing algorithms. In Asymptotic Analysis, we evaluate the performance of an algorithm in terms of input size (we don’t measure the actual running time). We calculate, how does the time (or space) taken by an algorithm increases with the input size. </p> </div> <div id="python" class="contentClass"> <h3>Python</h3> <p> Python is a high-level, general-purpose and a very popular programming language. Python programming language (latest Python 3) is being used in web development, Machine Learning applications, along with all cutting edge technology in Software Industry. Python Programming Language is very well suited for Beginners, also for experienced programmers with other programming languages like C++ and Java. </p> </div> <div id="algorithms" class="contentClass"> <h3>Greedy Algorithms</h3> <p> Greedy is an algorithmic paradigm that builds up a solution piece by piece, always choosing the next piece that offers the most obvious and immediate benefit. So the problems where choosing locally optimal also leads to global solution are best fit for Greedy. </p> </div> <div id="machine" class="contentClass"> <h3>Machine Learning</h3> <p> Machine Learning is the field of study that gives computers the capability to learn without being explicitly programmed. ML is one of the most exciting technologies that one would have ever come across. As it is evident from the name, it gives the computer that makes it more similar to humans: The ability to learn. Machine learning is actively being used today, perhaps in many more places than one would expect. </p> </div> </body> </html>
Código CSS: El siguiente código es del archivo “style.css” que se usa para el estilo de la página y las pestañas.
css
<style>
h3 {
text-align: left;
}
/* Button to open the content */
.linkclass {
float: left;
cursor: pointer;
padding: 10px 15px 10px 10px;
background-color: light-grey;
}
/* Button styling on mouse hover */
#tabsDiv a:hover {
color: black;
background-color: #e9e9e9;
font-size: 16px;
}
/* Change the color of the button */
button.active {
background-color: #c0c0c0;
}
/* Content for button tabs*/
.contentClass {
display: none;
padding: 10px 16px;
border: 2px solid #c0c0c0;
}
</style>
Código JavaScript: El siguiente código contiene la funcionalidad de las pestañas que usan JavaScript.
Javascript
function displayContent(event, contentNameID) {
let content =
document.getElementsByClassName("contentClass");
let totalCount = content.length;
// Loop through the content class
// and hide the tabs first
for (let count = 0;
count < totalCount; count++) {
content[count].style.display = "none";
}
let links =
document.getElementsByClassName("linkClass");
totalLinks = links.length;
// Loop through the links and
// remove the active class
for (let count = 0;
count < totalLinks; count++) {
links[count].classList.remove("active");
}
// Display the current tab
document.getElementById(contentNameID)
.style.display = "block";
// Add the active class to the current tab
event.currentTarget.classList.add("active");
}
Producción:
Pestañas verticales: las pestañas se pueden hacer verticales cambiando la estructura HTML y reemplazando la hoja de estilo CSS con una modificada utilizada para el diseño de pestañas verticales. El código siguiente muestra las pestañas verticales.
Código HTML:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="vstyle.css"> <script src="script.js"></script> </head> <body> <h2 style="color:green"> GeeksforGeeks Vertical tabs </h2> <div id="tabsDiv"> <div id="interview" class="contentClass"> <h3>Interview</h3> <p> Also, in Asymptotic analysis, we always talk about input sizes larger than a constant value. It might be possible that those large inputs are never given to your software and an algorithm which is asymptotically slower, always performs better for your particular situation. So, you may end up choosing an algorithm that is Asymptotically slower but faster for your software. </p> </div> <div id="practice" class="contentClass"> <h3>Practice</h3> <p> Asymptotic Analysis is the big idea that handles above issues in analyzing algorithms. In Asymptotic Analysis, we evaluate the performance of an algorithm in terms of input size (we don’t measure the actual running time). We calculate, how does the time (or space) taken by an algorithm increases with the input size. </p> </div> <div id="python" class="contentClass"> <h3>Python</h3> <p> Python is a high-level, general-purpose and a very popular programming language. Python programming language (latest Python 3) is being used in web development, Machine Learning applications, along with all cutting edge technology in Software Industry. Python Programming Language is very well suited for Beginners, also for experienced programmers with other programming languages like C++ and Java. </p> </div> <div id="algorithms" class="contentClass"> <h3>Greedy Algorithms</h3> <p> Greedy is an algorithmic paradigm that builds up a solution piece by piece,always choosing the next piece that offers the most obvious and immediate benefit. So the problems where choosing locally optimal also leads to global solution are best fit for Greedy. </p> </div> <ul class="ulClass" style="height:300px"> <li style="list-style-type:none;"> <button class="linkClass" onclick= "displayContent(event, 'interview')"> Interview </button> </li> <li style="list-style-type:none;"> <button class="linkClass" onclick= "displayContent(event, 'practice')"> Practice </button> </li> <li style="list-style-type:none;"> <button class="linkClass" onclick= "displayContent(event, 'python')"> Python </button> </li> <li style="list-style-type:none;"> <button class="linkClass" onclick= "displayContent(event, 'algorithms')"> Algorithms </button> </li> </ul> </div> </body> </html>
Código CSS: El siguiente código es el código CSS modificado para la visualización de pestañas verticales.
css
<style>
* {
box-sizing: border-box;
}
#tabsDiv {
height: 300px;
border: 2px solid #c0c0c0;
}
#tabsDiv ul {
height: 300px;
padding: 0px 5px;
}
#tabsDiv li {
width: 15%;
height: 60px;
}
#tabsDiv button {
float: left;
border: 1px solid #c0c0c0;
background-color: #f1f0f4;
}
/* Button to open the content */
#tabsDiv button {
display: block;
background-color: inherit;
color: black;
padding: 25px 15px;
width: 100%;
text-align: left;
cursor: pointer;
}
/* Button styling on mouse hover */
#tabsDiv button:hover {
background-color: #d1d1d1;
color: lime;
}
#tabsDiv button.active {
background-color: #c0c0c0;
}
/* Content for tabs*/
.contentClass {
display: none;
position: absolute;
left: 18%;
padding: 0px 15px;
width: 70%;
border-style: none;
height: 300px;
}
</style>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA