如何使镜像/点击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。

您可以使用带有:target的CSS：

来执行此操作

  

：target伪类表示唯一元素（如果有）   一个id匹配文档URI的片段标识符。

为此，您需要为要突出显示的每个元素添加一个id，使用带有id文本的哈希链接，以及每个元素的css规则：

#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>

{{1}}

Answer 2

如果你使用jquery

，这很容易做到

这也可以双向工作..他们可以点击顶部或底部..

请注意我没有样式或指定特定的Jquery选择器。 如果这会干扰页面上的其他代码，则可能需要更改选择器。

给出不同的颜色只需修改CSS ..

＆＃13;

＆＃13;

$('th').on('click',selectTimes)

function selectTimes(){
 $('[hour="'+$(this).attr('hour')+'"]').toggleClass('selected');
}

＆＃13;

th {
  height: 20px;
  width: 20px;
}
.booked .selected {
  background-color: yellow;
}
.booked_active .selected {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="booked">
    <th hour="1">00 am</th>
    <th hour="2">01 am</th>
    <th hour="3">02 am</th>
    <th hour="4">03 am</th>
    <th hour="5">04 am</th>
    <th hour="6">05 am</th>
    <th hour="7">06 am</th>
    <th  hour="8">07 am</th>
    <th hour="9">08 am</th>
    <th hour="10">09 am</th>
    <th hour="11">10 am</th>
    <th hour="12">11 am</th>
  </tr>
  <tr class="booked_active">
    <th hour="1">4 pm</th>
    <th hour="2">5 pm</th>
    <th hour="3">6 pm</th>
    <th hour="4">7 pm</th>
    <th hour="5">8 pm</th>
    <th hour="6">9 pm</th>
    <th hour="7">10 pm</th>
    <th hour="8">11 pm</th>
    <th hour="9">12 am</th>
    <th hour="10">1 am</th>
    <th hour="11">2 am</th>
    <th hour="12">3 am</th>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;