html - 我必须过滤没有 javascript 或 div 的图像:/
问题描述
对于大学项目,我们必须制作一个产品页面,客户可以在其中根据特定特征(在我的例子中为品牌)过滤产品(图像)。我曾尝试在按钮和复选框的帮助下做到这一点,但是如果没有 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>
解决方案
在您的 CSS 中使用它(您不要在选择器中使用与 HTML 中的表格相同的类名)
.tableProducten tbody tr,
.tablefilter{
display:none;
}
推荐阅读
- python - 从 Adobe Premiere / Encoder in Python 和 FFMPEG 中生成的 MP4 获取时间码
- c# - 使用泛型时如何与 EF 创建多对多关系
- java - 如何将 JSON 字符串解析为 ListView?
- javascript - React useState Hook - 无法清除表单数据上的状态
- azure - Azure API 出口成本 - 了解通过 API 从 Azure 提取数据的成本
- javascript - 如何让登录控制台的整个数组出现在选定的 id 标记中?
- django - Google API/Celery(使用 django/redis)- 带有 api 调用的函数作为普通函数工作,添加 .delay() 以将其添加到异步任务队列,出现 SSL 错误
- ios - 选择 TextField 时,导航栏被推出安全区域
- json - 将 cURL 转换为 PowerShell Invoke-WebRequest - JSON 数据表问题
- python - 如何使用 selenium python 查找与特定 WebElement 相关的以前的 WebElement