Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica ofrece un componente de pestaña para que los usuarios agrupen diferentes categorías de contenido, mostrando solo una categoría de contenido a la vez. Las otras opciones se muestran en cuadros alineados en una fila. Los usuarios pueden hacer clic en cualquiera de las opciones para ver esa opción.
Si el contenido de la pestaña es estático o ya está cargado, el contenido se puede etiquetar con la clase activa . No hay necesidad de un estado de carga en ese caso. El contenido se puede mostrar cuando el usuario hace clic en el menú de pestañas.
Clase de estado activo de la pestaña de interfaz de usuario semántica:
- activo: esta clase se utiliza para establecer el estado de la pestaña como el estado activo.
Sintaxis:
<div class="ui ... active tab segment"> <p>...</p> ... </div>
Ejemplo: este ejemplo demuestra el estado activo de la interfaz de usuario semántica utilizando la clase activa . Por defecto, la pestaña 1 está activa como se ve en la imagen de abajo. Los usuarios pueden hacer clic en las otras pestañas para convertirlo en un estado activo y ver sus datos respectivos.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<br /><br />
<div class="ui container">
<h2 class="header ui green">
GeeksforGeeks
</h2>
<strong>Semantic UI Tab Active State</strong>
<div class="ui top attached tabular menu">
<div class="active item" data-tab="first">Tab</div>
<div class="item" data-tab="second">Tab 2</div>
<div class="item" data-tab="third">Tab 3</div>
</div>
<div class="ui bottom attached active tab segment"
data-tab="first">
<p>Sample data 1:</p>
<p>
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.
You can also take part in our mock
placement contests which will help
you learn different topics and
practice at the same time, simulating
the feeling of a real placement test
environment.
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="second">
<p>Sample data 2:</p>
<p>
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.
You can also take part in our mock
placement contests which will help
you learn different topics and
practice at the same time, simulating
the feeling of a real placement test
environment.
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="third">
<p>Sample data 3:</p>
<p>
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.
You can also take part in our mock
placement contests which will help
you learn different topics and
practice at the same time, simulating
the feeling of a real placement test
environment.
</p>
</div>
</div>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Producción:
Estado activo de la pestaña de IU semántica
Enlace de referencia: https://semantic-ui.com/modules/tab.html#active
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA