Показывать изображение (в таблице) с выпадающим списком (без javascript)

ProgramBox

Показывать изображение (в таблице) с выпадающим списком (без javascript)

Post author:admin
Запись опубликована:14 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Для проекта мы должны создать страницу, на которой пользователи могут настраивать продукт. Я хотел добиться этого с помощью выпадающего списка, в котором пользователи могут выбирать цвет своего автомобиля. Это оказалось довольно сложным без возможности использовать divs и javascript. Цель состоит в том, чтобы показывать скрытую таблицу-cel при выборе цвета в выпадающем меню. Я пытался сделать это с помощью «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>

1. Для этого вам нужен javascript. Вы могли бы сделать это с помощью css, если бы было возможно сделать изображение дочерним элементом флажка, однако input элементы являются самозакрывающимися и не содержат содержимого, что делает это недоступным с помощью чистого css.

2. Это плохая новость, по какой-то нелепой причине учитель мне не разрешил

3. Если javascript требуется опустить, это звучит так, как будто вы настроены на сбой. Теоретически это было бы возможно с использованием псевдоселекторов css not , однако вам нужно было бы значительно изменить ваше dom-дерево. В любом случае в реальной производственной среде любой макет, которому удалось достичь этого, как вы описываете, был бы запутанным и не поддерживаемым, и вам, вероятно, следует выговорить своему учителю за то, что он намеренно настраивает вас на плохую практику.

4. На самом деле это не ваша вина, если вы не разработали назначение. Однако об этом стоит упомянуть вашему преподавателю.

5. @JelleSpruyt вы уверены, что вам нужна структура html в том виде, в каком вы ее создали? разве мы не можем это изменить? Можем ли мы использовать флажки или переключатели?

Ответ №1:

Согласно вашей структуре, вы не можете сделать это с помощью чистого CSS и HTML, поскольку CSS не имеет родительского или обратного селектора. Я изменил HTML и использовал переключатели, чтобы добиться того же в этой скрипке

Я использовал селектор непосредственного родства

Ответ №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. Я не вижу причин для размещения ваших изображений в таблице.