puro htm css tabs ma non capisco perchè non mi funziona
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
Codice HTML:
.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