Question

对于项目，我们必须创建一个页面，用户可以在其中定制产品。我想通过一个下拉菜单实现这一点，用户可以在其中选择自己的汽车颜色。如果没有使用div和javascript的能力，这已被证明非常困难。目的是在下拉菜单中选择颜色后显示隐藏的表格。我一直在尝试通过“ option：checked”和“ option：active”来执行此操作，但是它仅显示表中的所有图像。预先感谢您来看看:)！

     .kleur1,.kleur2,.kleur3,.kleur4,.kleur5{
            display: none;
        }
        #kleur1.kleurfilter:checked ~ table,tr,td.kleur1,
        #kleur2.kleurfilter:checked ~table,tr,td.kleur2,
        #kleur3.kleurfilter:checked ~ table,tr,td.kleur3,
        #kleur4.kleurfilter:checked ~ table,tr,td.kleur4,
        #kleur5.kleurfilter:checked ~ table,tr,td.kleur5{
            display: table-cell;
        }

   <main>
    <table>
        <tr class="kleurPerson">
            <td class="kleur1"><img src="../media/customize/rsz_black.jpg" alt="Zwarte mercedes amg gt4"></td>
            <td class="kleur2"><img src="../media/customize/rsz_blue.jpg" alt="Blauwe mercedes amg gt4"></td>
            <td class="kleur3"><img src="../media/customize/rsz_red.jpg" alt="Rode mercedes amg gt4"></td>
            <td class="kleur4"><img src="../media/customize/rsz_white.jpg" alt="Witte mercedes amg gt4"></td>
            <td class="kleur5"><img src="../media/customize/rsz-silver.jpg" alt="Silvere mercedes amg gt4"></td>
        </tr>
    </table>
    <select name="kleur" id="kleur">
        <option class="kleurfilter" id="kleur1" value="Midnight black">Midnight Black</option>
        <option class="kleurfilter" id="kleur2" value="Sky blue">Sky blue</option>
        <option class="kleurfilter" id="kleur3" value="Matte Red">Matte red</option>
        <option class="kleurfilter" id="kleur4" value="Slick white">Slick white</option>
        <option class="kleurfilter" id="kleur5" value="Silver">Silver</option>
    </select>
    <label for="kleur">Mercedes</label>

</main>

Answer 1

根据您的结构，您不能通过纯CSS和HTML来完成此操作，因为CSS没有父级或后向选择器。我已经修改了HTML，并使用了单选按钮在this fiddle

中实现了相同的功能

我使用了+立即兄弟选择器

Answer 2

您采用的方法是不可能的，因为CSS中没有父选择器，并且table不是所选~的同级兄弟（option）。

如果您乐意重组HTML，可以使用标签来切换单选按钮，例如此凌乱的演示：

.kleur1,
.kleur2,
.kleur3,
.kleur4,
.kleur5 {
  display: none;
}

#kleur1:checked~table td.kleur1,
#kleur2:checked~table td.kleur2,
#kleur3:checked~table td.kleur3,
#kleur4:checked~table td.kleur4,
#kleur5:checked~table td.kleur5 {
  display: table-cell;
}

input[name=kleur] {
  display: none;
}

.options label {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid grey;
}

.options label:hover:before {
  display: block;
  content: attr(data-name);
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  white-space: nowrap;
  padding: 2px;
  background: yellow;
}

<main>
  <input type="radio" name="kleur" id="kleur1" value="1" />
  <input type="radio" name="kleur" id="kleur2" value="2" />
  <input type="radio" name="kleur" id="kleur3" value="3" />
  <input type="radio" name="kleur" id="kleur4" value="4" />
  <input type="radio" name="kleur" id="kleur5" value="5" />
  <table>
    <tr class="kleurPerson">
      <td class="kleur1"><img src="../media/customize/rsz_black.jpg" alt="Zwarte mercedes amg gt4"></td>
      <td class="kleur2"><img src="../media/customize/rsz_blue.jpg" alt="Blauwe mercedes amg gt4"></td>
      <td class="kleur3"><img src="../media/customize/rsz_red.jpg" alt="Rode mercedes amg gt4"></td>
      <td class="kleur4"><img src="../media/customize/rsz_white.jpg" alt="Witte mercedes amg gt4"></td>
      <td class="kleur5"><img src="../media/customize/rsz-silver.jpg" alt="Silvere mercedes amg gt4"></td>
    </tr>
  </table>

  <div class="options">
    <label for="kleur1" style="background:black" data-name="Midnight Black"></label>
    <label for="kleur2" style="background:blue" data-name="Sky blue"></label>
    <label for="kleur3" style="background:red" data-name="Matte red"></label>
    <label for="kleur4" style="background:white" data-name="Slick white"></label>
    <label for="kleur5" style="background:silver" data-name="Silver"></label> Mercedes
  </div>
</main>

P.S。我认为没有理由将您的图片放在表格中。

显示带有下拉菜单的图像（在表格中）（没有javascript）

2 个答案: