CSS Grid：如何使网格单元成为超链接目标？

Question

我正在使用CSS Grid设计一个简单的两列布局；网格区域分别命名为Cell1和Cell2。在左列（Cell1）中，我想要一个超链接列表。单击超链接时，我希望内容在右列（Cell2）中打开。

我想我可以使用书签来标记已经加载到Cell2中的内容，但是我更喜欢一种在不单击书签的情况下单击链接时在正确的单元格中显示内容的方法。

使用CSS Grid布局，是否有一种方法可以指定单击超链接时应将内容移至的单元格，而不是包含超链接的单元格-使用书签或其他方法？

非常感谢您提供任何信息。

Answer 1

是的，这是可能的，但是如果允许使用JavaScript / jQuery，则这样做会容易得多。这是仅使用HTML和CSS来完成您所需的示例：

Debug

a {
  text-decoration: none;
  color: #333;
}
.tabs {
  position: relative;
  clear: both;
}
.tabs .tab {
  float: left;
  margin-right: 10px;
}
.content {
  position: absolute;
  background-color: white;
  width: 100%;
  left: 0px;
}
.tabs .tab:nth-of-type(1) .content {
  z-index: 1;
}
.tab:target a {
  font-weight: bold;
}
.tab:target .content {
  z-index: 1;
}