javascript - 如何让mirror like/click div影响其他div？

Question

我编写了这个时间表网格，我希望用户点击英国时间，然后点击美国时间的时间以突出显示，我想知道你是否可以通过 css 做到这一点？ 我想选择多个小时。我看过几个例子，但它们只适用于一个 div。

这是用表格构建的，所以我的代码看起来像

<table>
    <tr class="booked">
      <th><a href="">00 am</a></th>
      <th><a href="">01 am</a></th>
      <th><a href="">02 am</a></th>
      <th><a href="">03 am</a></th>
      <th><a href="">04 am</a></th>
      <th><a href="">05 am</a></th>
      <th><a href="">06 am</a></th>
      <th><a href="">07 am</a></th>
      <th><a href="">08 am</a></th>
      <th><a href="">09 am</a></th>
      <th><a href="">10 am</a></th>
      <th><a href="">11 am</a></th>
    </tr>
    <tr class="booked_active">
      <th>4 pm</th>
      <th>5 pm</th>
      <th>6 pm</th>
      <th>7 pm</th>
      <th>8 pm</th>
      <th>9 pm</th>
      <th>10 pm</th>
      <th>11 pm</th>
      <th>12 am</th>
      <th>1 am</th>
      <th>2 am</th>
      <th>3 am</th>
    </tr>
  </table>

注意:将有 7 个这样的网格，一个对应一周中的每一天。

Answer 1

使用 CSS，您可以一次选择一个小时。如果你想要不止一个元素，你将不得不使用 JS。

您可以使用 CSS 和 :target 来做到这一点:

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

为此，您需要为每个要突出显示的元素提供一个 ID，使用带有 ID 文本的散列链接，以及每个元素的 css 规则:

<th><a href="#cell1">00 am</a>
</th>

<th id="cell1">4 pm</th>

#cell1:target {
  color: red;
}

#cell1:target {
  color: red;
}
#cell2:target {
  color: red;
}
#cell3:target {
  color: red;
}
#cell4:target {
  color: red;
}
#cell5:target {
  color: red;
}
#cell6:target {
  color: red;
}
#cell7:target {
  color: red;
}
#cell8:target {
  color: red;
}
#cell9:target {
  color: red;
}
#cell10:target {
  color: red;
}
#cell11:target {
  color: red;
}
#cell12:target {
  color: red;
}

<table>
  <tr class="booked">
    <th><a href="#cell1">00 am</a>
    </th>
    <th><a href="#cell2">01 am</a>
    </th>
    <th><a href="#cell3">02 am</a>
    </th>
    <th><a href="#cell4">03 am</a>
    </th>
    <th><a href="#cell5">04 am</a>
    </th>
    <th><a href="#cell6">05 am</a>
    </th>
    <th><a href="#cell7">06 am</a>
    </th>
    <th><a href="#cell8">07 am</a>
    </th>
    <th><a href="#cell9">08 am</a>
    </th>
    <th><a href="#cell10">09 am</a>
    </th>
    <th><a href="#cell11">10 am</a>
    </th>
    <th><a href="#cell12">11 am</a>
    </th>
  </tr>
  <tr class="booked_active">
    <th id="cell1">4 pm</th>
    <th id="cell2">5 pm</th>
    <th id="cell3">6 pm</th>
    <th id="cell4">7 pm</th>
    <th id="cell5">8 pm</th>
    <th id="cell6">9 pm</th>
    <th id="cell7">10 pm</th>
    <th id="cell8">11 pm</th>
    <th id="cell9">12 am</th>
    <th id="cell10">1 am</th>
    <th id="cell11">2 am</th>
    <th id="cell12">3 am</th>
  </tr>
</table>