puro htm css tabs ma non capisco perchè non mi funziona

[puntifedelta]

ciao ragazzi, una domanda ho creato in html e css dei tabs non voglio utilizzare javascript per questo mi serve il vostro aiuto perchè non capisco il motivo del suo non funzionamento

questo è il codice css

.tabs {display: flex;flex-wrap: wrap;}
.tabs label {order: 1; firstdisplay: block;padding: 1rem 2rem;
margin-right: 0.2rem;cursor: pointer;background: #f9f9f9;font-weight: bold;transition: background ease 0.2s;border-radius: 15px}
.tabs .tab {order: 99; astflex-grow: 1;width: 100%;display: none;padding: 1rem;background: #fff;}
.tabs input[type="radio"] {display: none;}
.tabs input[type="radio"]:checked + label {background: #fff;border-bottom: 1px solid #e2e2e2;}
.tabs input[type="radio"]:checked + label + .tab {display: block;}
@media (max-width: 45em) {.tabs .tab,.tabs label {order: initial;}
.tabs label {width: 100%;margin-right: 0;margin-top: 0.2rem;}}
.tabp {line-height: 25px;text-align: left;padding: 5px;font-size: 15px;}

questo è invece il codice html

<div class="col-lg-12">
<div class="product__details__tab">
<ul class="nav nav-tabs tabs">
<li class="nav-item">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Tabella Uno</label>
</li>
<li class="nav-item">
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Tabella Due</label>
</li>
<li class="nav-item">
<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">Tab Tre</label>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane tab active" id="tabone">
<h6>Description</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>
</div>
<div class="tab-pane tab" id="tabtwo">
<h6>Specification</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>
</div>
<div class="tab-pane tab" id="tabthree">
<h6>Reviews ( 2 )</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>
</div>
</div>
</div>
</div>

al click non mi cambia tabs

grazie a tutti

[GraphOGLRisorse]

Salve,
mancano alcune classi css nei codici mostrati.

Le metto una mia versione del suo codice che ho sistemato:

<style>
.tabset > input[type="radio"] {position:absolute; left:-200vw;}

.tabset .tab-panel {display:none;}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {display: block;}

.tabset > label { position:relative; display:inline-block; padding:15px 15px 25px; border:1px solid transparent; border-bottom:0; cursor:pointer; font-weight:600;order:1;firstdisplay:block;padding:1rem 2rem;margin-right:0.2rem;cursor:pointer;background: #f9f9f9;font-weight:bold;transition:background ease 0.2s;border-radius:15px}

.tabset > label::after {position:absolute; left:15px; bottom:10px width:22px; height:4px; background:#8d8d8d;}

.tabset > label:hover,
.tabset > input:focus + label {color:#06c;}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {background:#06c;}

.tabset > input:checked + label { color:#06c; border-color:#ccc; border-bottom:1px solid #fff; margin-bottom:-1px;}

.tab-panel {padding:30px 0; border-top:1px solid #ccc;
}
</style>

<div class="tabset">
  <!-- Tab 1 -->
  <input name="tabset" id="tab1" checked="checked" type="radio">
  <label for="tab1">Scheda Uno</label>
  <!-- Tab 2 -->
  <input name="tabset" id="tab2" type="radio">
  <label for="tab2">Scheda Due</label>
  <!-- Tab 3 -->
  <input name="tabset" id="tab3" type="radio">
  <label for="tab3">Scheda Tre</label>
  
  <div class="tab-panels">
    <section id="tab1" class="tab-panel">
      <h6>Description</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>
  </section>
    <section id="tab2" class="tab-panel">
<h6>Specification</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>
    </section>
    <section id="tab3" class="tab-panel">
<h6>Reviews ( 2 )</h6>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt loret.
Neque porro lorem quisquam est, qui dolorem ipsum quia dolor si. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut loret fugit, sed quia ipsu
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nulla
consequat massa quis enim.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>

    </section>
  </div>
  
</div>

Cordiali saluti.

[puntifedelta]

grazie per il tempo che mi ha dedicato