Question

对于一个大学项目，我们必须创建一个产品页面，客户可以根据特定特征（在我的情况下为品牌）过滤产品（图像）。我已经尝试通过按钮和复选框来做到这一点，但是如果没有javascript或div，要使其正常工作一直是一个很大的挑战。我将图片放在表格中，因为这样更容易给出结构化外观。感谢您查看我的代码！

tr {
  position: relative;
}

.ImgProd {
  border: solid 3px dimgrey;
  width: 180px;
  height: 180px;
  transition: .2s;
}

.filteredtable tbody tr,
.tablefilter {
  display: none;
}

#class1.tablefilter:checked~table tbody tr.class1,
#class2.tablefilter:checked~table tbody tr.class2,
#class3.tablefilter:checked~table tbody tr.class3 {
  display: table-row;
}

.tablefilter+label {
  cursor: pointer;
  background-color: #666;
  color: #fff;
  padding: 3px;
}

.tablefilter:checked+label {
  background-color: #111;
}


/*hiermee zorgen we ervoor dat de image zoomt wanneer de gebruiker erover hovert*/

.ImgProd:hover {
  transform: scale(2);
}

.tableProducten {
  position: relative;
  left: 6%
}

<h1>Onze producten</h1>
<!-- we gebruiken buttons als fitler element tussen de verschillende merken van auto's -->
<input type="checkbox" class="tablefilter" name="class1" id="class1" checked />
<label for="class1">Mercedes</label>
<input type="checkbox" class="tablefilter" name="class2" id="class2" checked />
<label for="class2">BMW</label>
<input type="checkbox" class="tablefilter" name="class3" id="class3" checked />
<label for="class3">Opel</label>

<table class="tableProducten">
  <tr class="class1">
    <td>
      <img src="../resources/Mercedes/AMG_GT4.jpg" alt="AMG GT4" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/BenzSla.jpg" alt="BenzSla" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/Cla.jpg" alt="Cla" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/DEX.jpg" alt="DEX" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/Eklas.jpg" alt="Eklas" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/EQC.jpg" alt="EQC" class="ImgProd">
    </td>
    <td>
      <img src="../resources/Mercedes/SUV.jpg" alt="SUV" class="ImgProd">
    </td>
  </tr>
  <tr class="class2">
    <td>
      <img src="../resources/BMW/AC.jpg" alt="bmw AC" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/IX3.jpg" alt="IX3" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/M2.jpg" alt="M2" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/M5.jpg" alt="M5" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/M6.jpg" alt="M6" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/X1.jpg" alt="X1" class="ImgProd">
    </td>
    <td>
      <img src="../resources/BMW/Z4.jpg" alt="Z4" class="ImgProd">
    </td>
  </tr>
  <tr class="class3">
    <td>
      <img src="../resources/OPEL/Adam.jpg" alt="ADAM" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/Astra.jpg" alt="Astra" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/ComboL1.jpg" alt="ComboL1" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/Corsa.jpg" alt="Corsa" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/CorsaX.jpg" alt="CorsaX" class="ImgProd">
    </td>
    <td>
      <img src="../resources/OPEL/MokkaX.jpg" alt="MokkaX" class="ImgProd">
    </td>
  </tr>
</table>

Answer 1

在CSS中使用它（您在选择器中使用的表名与HTML中的表名不同）

.tableProducten tbody tr,
.tablefilter{
    display:none;
}

我必须过滤没有javascript或div的图像：/

1 个答案: