纯css html标签点击不会改变

Question

我用纯css和html创建了这些卡片，我不想用javascript，但我不明白为什么它对我不起作用，你能帮我解决这个问题吗？谢谢你

​

.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;
}

```javascript

<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 class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  </div>

  <div class="tab-pane tab" id="tabtwo">

    <h6>Specification</h6>

    <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  </div>

  <div class="tab-pane tab" id="tabthree">

    <h6>Reviews ( 2 )</h6>

    <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  </div>

</div>

​

Answer 1

你需要把无线输入放在标签上面(你可以隐藏它们)，这样你就可以选择标签，也可以使用id来显示特定的标签：

​

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #f9f9f9;
  font-weight: bold;
  transition: background ease 0.2s;
  border-radius: 15px
}

.tab {
  order: 99;
  flex-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;
}
/* ADDED */
input[type="radio"] {
  display: none;
}
#tabone:checked ~ .tab-content #tabone,
#tabtwo:checked ~ .tab-content #tabtwo ,
#tabthree:checked ~ .tab-content #tabthree {
  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;
}

<div class="col-lg-12">
  <div class="product__details__tab">
    <input type="radio" name="tabs" id="tabone" checked="checked">
    <input type="radio" name="tabs" id="tabtwo">
    <input type="radio" name="tabs" id="tabthree">
    <ul class="nav nav-tabs tabs">
      <li class="nav-item">
        <label for="tabone">Tabella Uno</label>
      </li>
      <li class="nav-item">
        <label for="tabtwo">Tabella Due</label>
      </li>
      <li class="nav-item">
        <label for="tabthree">Tab Tre</label>
      </li>
    </ul>
    
    <div class="tab-content">
      <div class="tab-pane tab active" id="tabone">
        <h6>Description</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabtwo">
        <h6>Specification</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="tab-pane tab" id="tabthree">
        <h6>Reviews ( 2 )</h6>
        <p class="tabp">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

​