tutorial-come-realizzare-delle-tab-in-html-e-javascript

Come realizzare delle Tab in Html e JavaScript

18 Giugno 2020 0 Commenti

Benissimo ragazzi, oggi dopo un bel po' di tempo trascorso, vorrei proporvi un semplice tutorial per realizzare un'effetto tab con giusto qualche riga di codice.

Come sempre puoi vedere una demo cliccando QUI, mentre per scaricare il tutorial clicca QUI.

Per prima cosa apriamo il nostro documento HTML semplice ed inseriamo la sintassi base di HTML e il tag "viewport" che permette al contenuto di adattarsi alle varie risoluzioni:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
</head>
<body>
</body>
</html>

Nella sezione "style "del nostro documento, invece, inseriamo appunto lo stile principale del nostro menu:

/* Stile della Tab */
.tab { overflow: hidden;}

/* Colore della tab e stile*/
.tab button { background-color: inherit; float: left; border: 1px solid #ddd;
  outline: none; color: #e37210; cursor: pointer; padding: 14px 16px;
  transition: 0.3s; font-size: 17px;
}

/* Effetto Hover della Tab*/
.tab button:hover {background-color: #eee;}

/* Colore della tab Attiva */
.tab button.active { background-color: #eee;}

/* Dimensione della Tab*/
.tab button { width: 100%;}
/* Contenuto di ogni tab */
.tabcontent { display: none; border: 1px solid #ccc; border-top: none;text-align: center;}

Una folta fatto ciò, passiamo con la creazione delle tab vere e proprie, in questo tutorial creeremo 3 tabs, ma il codice può essere esteso fino ad N.

Inseriamo questo codice nella posizione dove vorremmo che le nostre tabs siano mostrate:

<!-- CONTAINER DELLE TAB -->
<div class="tab">
	<!-- TAB 1 -->
 <button class="tablinks" onclick="apritab(event, '1')">TAB1</button>
  <div id="1" class="tabcontent">
	  <p>Contenuto tab 1</p>
  </div>
  <!-- TAB 2 -->
 <button class="tablinks" onclick="apritab(event, '2')">TAB2</button>
  <div id="2" class="tabcontent">
	  <p>Contenuto tab 2</p>
  </div>
  <!-- TAB 3 -->
 <button class="tablinks" onclick="apritab(event, '3')">TAB3</button>
  <div id="3" class="tabcontent">
	  <p>Contenuto tab 3</p>
  </div>
</div>

Come potete notare, sono delle tab partcolari, un po' tipo "Accordion Menu", che sono molto funzionali ed accattivanti, specialmente sul mobile; inoltre, avrete fatto caso alla funzione "apritab" che passa come argomento l'id del div con il rispettivo contenuto, proprio ciò ci servirà nel prossimo ed ultimo step, dove creeremo il codice Javascript per far si che le tab mostrino il relativo contenuto:

<script>
function apritab(evt, numerotab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(numerotab).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

Codice Completo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Stile della Tab */
.tab { overflow: hidden;}

/* Colore della tab e stile*/
.tab button { background-color: inherit; float: left; border: 1px solid #ddd;
  outline: none; color: #e37210; cursor: pointer; padding: 14px 16px;
  transition: 0.3s; font-size: 17px;
}
/* Effetto Hover della Tab*/
.tab button:hover {background-color: #eee;}

/* Colore della tab Attiva */
.tab button.active { background-color: #eee;}

/* Dimensione della Tab*/
.tab button { width: 100%;}
/* Contenuto di ogni tab */
.tabcontent { display: none; border: 1px solid #ccc; border-top: none;text-align: center;}
</style>
</head>
<body>
<!-- CONTAINER DELLE TAB -->
<div class="tab">
	<!-- TAB 1 -->
 <button class="tablinks" onclick="apritab(event, '1')">TAB1</button>
  <div id="1" class="tabcontent">
	  <p>Contenuto tab 1</p>
  </div>
  <!-- TAB 2 -->
 <button class="tablinks" onclick="apritab(event, '2')">TAB2</button>
  <div id="2" class="tabcontent">
	  <p>Contenuto tab 2</p>
  </div>
  <!-- TAB 3 -->
 <button class="tablinks" onclick="apritab(event, '3')">TAB3</button>
  <div id="3" class="tabcontent">
	  <p>Contenuto tab 3</p>
  </div>
</div>
<script>
function apritab(evt, numerotab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(numerotab).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
</body>
</html>

Spero che questo tutorial vi sia piaciuto, commentate per informazioni e ci aggiorniamo al prossimo articolo....
Stay Tuned! :)

Tags: