我编写了这个时间表网格,我希望用户点击英国时间,然后点击美国时间的时间以突出显示,我想知道你是否可以通过 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 个这样的网格,一个对应一周中的每一天。
最佳答案
使用 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>
关于javascript - 如何让mirror like/click div影响其他div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41046572/