Il funzionamento di tabs con JS è relativamente semplice: un primo gruppo di elementi, formato da pulsanti o testo di paragrafo o elenchi, mostra le linguette di ogni scheda. Un secondo gruppo di ugual numero, formato da qualsivoglia blocco Gutenberg, costituisce il contenuto di ogni scheda. Ogni elemento del primo gruppo è linkato con un elemento del secondo gruppo. Javascript mette in relazione i due gruppi evitando i problemi che abbiamo evidenziato nell’uso di :target e di ancore.
Il primo esempio non è stato creato espressamente per WP, ma è talmente semplice che si può adattare facilmente. Si tratta praticamente di due elenchi: uno funge da link, l’altro da contenuti.
Il secondo esempio non è stato creato espressamente per WP, ma si adatta facilmente perché è composto un elenco che funge da link e da un gruppo di contenuti.
Il terzo esempio è creato espressamente per WP.
- ddddd
- ggggg
- mmmmm
- contenuto d
- contenuto g
- contenuto m
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
Istruzioni
creare gruppo class=qualsiasi
creare elenco class=tabs con tre voci elenco (…si possono aggiungere altre voci)
creare elenco class=tabs-content con tre voci elenco (…si possono aggiungere altre voci)
Aggiungere CSS e Javascript
HTML
Ecco una copia dell’html generato da Gutenberg
<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained">
<ul class="wp-block-list tabs">
<li class="active-tab">ddddd</li>
<li>ggggg</li>
<li>mmmmm</li>
</ul>
<ul class="wp-block-list tabs-content">
<li>contenuto d</li>
<li>contenuto g</li>
<li>contenuto m <br>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat</li>
</ul>
</div>CSS
<style>
.entry-content ul li {list-style-type: none;}
.tabs {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
border-bottom: 1px solid #ccc;
.active-tab {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: none;
position: relative;
color: black;
&:after {
width: 100%;
height: 2px;
position: absolute;
content: "";
bottom: -0.1em;
left: 0;
background: white;
}
}
li {
display: inline-block;
cursor: pointer;
color: #3a5ea7;
padding: 5px 10px;
&:first-child {
margin-left: 10px;
}
}
}
.tabs-content {
margin: 20px;
padding: 0;
list-style: none;
li {
display: none;
}
}
</style>JS
Codice javascript
<script>
jQuery(function($){
var activeIndex = $('.active-tab').index(),
$contentlis = $('.tabs-content li'),
$tabslis = $('.tabs li');
// Show content of active tab on loads
$contentlis.eq(activeIndex).show();
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tabslis.removeClass('active-tab');
$current.addClass('active-tab');
$contentlis.hide().eq(index).show();
});
});
</script>Layout & Structure
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Looks & Presentation
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
Behavior & Interaction
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Istruzioni
creare gruppo class=tabs-dote
creare gruppo class=tab-links
creare elenco class=tab-list con tre voci elenco: titolo1 linkato a #1, titolo2 linkato a #2, titolo3 linkato a #3 (…si possono aggiungere altre voci)
creare gruppo class=tab-content-dote
creare tre gruppi di contenuti: id=1, 2, 3 (+ altri eventuali)
Aggiungere CSS e Javascript
HTML
Ecco una copia dell’html generato da Gutenberg
<div class="wp-block-group tabs-dote is-layout-constrained wp-block-group-is-layout-constrained">
<div class="wp-block-group tab-links is-layout-constrained wp-block-group-is-layout-constrained">
<ul class="wp-block-list tab-list">
<li class="active"><a href="#1">HTML</a></li>
<li><a href="#2">CSS</a></li>
<li><a href="#3">JAVASCRIPT</a></li>
</ul>
</div>
<div class="wp-block-group tab-content-dote is-layout-constrained wp-block-group-is-layout-constrained">
<div id="1" class="wp-block-group tab-panel active is-layout-constrained wp-block-group-is-layout-constrained">
<h2 class="wp-block-heading">Layout & Structure</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="2" class="wp-block-group tab-panel is-layout-constrained wp-block-group-is-layout-constrained">
<h2 class="wp-block-heading">Looks & Presentation</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</p>
</div>
<div id="3" class="wp-block-group tab-panel is-layout-constrained wp-block-group-is-layout-constrained">
<h2 class="wp-block-heading">Behavior & Interaction</h2>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
</div>
</div>CSS
<style>
*, :after, :before {
box-sizing: border-box;
}
/* Tabs
-------------------------*/
.tabs-dote {
background: #fff;
margin: auto;
padding: 2em;
border-radius: 4px;
border:1px solid #dddddd;
}
.entry-content .tabs-dote ul li {
list-style-type: none!important;
font-size:16px;
}
/* Tab links */
.tab-links {
display: none;
ul {
width: 100%;
display: flex;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 1px;
border-bottom: 1px solid #a8a9ad;
}
}
.tab-links li {
color: #333;
cursor: pointer;
margin-right: 10px;
&.active a {
color: #0f6ba2;
}
&.active a::after {
width: 100%;
}
}
.tab-links a {
color: #333;
display: inline-block;
padding: 10px;
position: relative;
transition: all .3s;
text-decoration: none;
&:hover {
color: #0f6ba2;
}
&::after {
content: "";
width: 0;
height: 3px;
bottom: -2px;
left: 0;
position: absolute;
transition: width .3s;
border-bottom: 3px solid #0f6ba2;
}
}
/* Tab content */
.tab-content-dote {
color: #2f3033;
padding: 1em 0;
}
.tab-panel {
margin: 0 auto;
margin-top:1em;
&.active {
display: block;
}
h2 {
color: #0f6ba2;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.1;
margin: 0;
}
&:first-child h2 {
margin-top: 0.62em;
}
}
/* Mobile */
@media(min-width: 580px) {
.tab-links {
width: 100%;
display: flex;
justify-content: center;
}
.tab-panel {
display: none;
h2 {
margin:0.75em;
}
}
}
</style>JS
Codice javascript
<script>
// Show tab click event
const showTab = (event) => {
event.preventDefault();
// Get tabs and content
const tabs = document.querySelectorAll('.tabs-dote .active');
// Remove active class from items
tabs.forEach(tab => {
tab.classList.remove('active');
});
// Add active class to clicked item
event.target.parentElement.classList.add('active');
document.getElementById(event.target.href.split('#')[1]).classList.add('active');
}
// Add event listener to all tab links
const tabLinks = document.querySelectorAll('.tab-list a');
tabLinks.forEach(link => {
link.addEventListener('click', showTab);
});
</script>fonte (con spiegazione)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?