1

Необходимо, чтобы при нажатии на дни недели менялась заштрихованная область.

Подскажите, пожалуйста, как реализовать это на HTML/CSS без фреймов.
Спасибо!

Пример

9

1 ответ 1

1

Если вам нужно на чистом html + css3, то вот, но лучше воспользоваться JS

Здесь мы используем псевдо класс input:checked и :before. label используется для выбора нужного input при клике на название. :before элементы задают фон выделенной области. Для размещения на ней останется только отпозиционировать блок в ту область и сделать ему прозрачный фон.

Аналогично можно поступить с блоками - после label добавляем блок размещаем где надо и делаем невидимым. При input:checked + label + .div-block делаем видимым (внимание на выходные дни)

.div {
  width: 500px;
  height: 300px;
  position: relative;
}

.ul {
  width: 200px;
}

.li {
  width: 100%;
  display: block;
}

.ul input {
  display: none;
}

.li:before {
  width: 300px;
  height: 300px;
  content: '';
  right: 0;
  top: 0;
  background: transparent;
  position: absolute;
  display: block;
  transition: background .3s;
}

#li1:checked+.li:before {
  background: #000;
}

#li2:checked+.li:before {
  background: #eea;
}

#li3:checked+.li:before {
  background: #e12;
}

#li4:checked+.li:before {
  background: #e72;
}

#li5:checked+.li:before {
  background: pink;
}

#li6:checked+.li+.div-block {
  background: #412;
  width: 300px;
  height: 300px;
  content: '';
  right: 0;
  top: 0;
  position: absolute;
  display: block;
  color: white;
}

#li7:checked+.li+.div-block {
  background: #812;
  width: 300px;
  height: 300px;
  content: '';
  right: 0;
  top: 0;
  position: absolute;
  display: block;
  color: white;
}

.div-block {
  display: none;
}
<div class="div">
  <div class="ul">
    <input name="input_btn" id="li1" type="radio" /><label class="li" for="li1">Понедельник </label>
    <input name="input_btn" id="li2" type="radio" /><label class="li" for="li2">Вторник </label>
    <input name="input_btn" id="li3" type="radio" /><label class="li" for="li3">Среда </label>
    <input name="input_btn" id="li4" type="radio" /><label class="li" for="li4">Четверг </label>
    <input name="input_btn" id="li5" type="radio" /><label class="li" for="li5">Пятница-развратница </label>
    <input name="input_btn" id="li6" type="radio" /><label class="li" for="li6">Суббота </label>
    <div class="div-block">А, что?</div>
    <input name="input_btn" id="li7" type="radio" /><label class="li" for="li7">Воскресенье </label>
    <div class="div-block">Где это я?</div>
  </div>
</div>