CSS 网格 : how to make grid cell a hyperlink target?

Question

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

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

使用 CSS Grid 布局，除了包含超链接的单元格之外，是否有任何方法可以指定单击超链接时内容应该进入的单元格 - 使用书签或其他任何东西？

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

Answer 1

是的，这是可能的，但如果您被允许使用 JavaScript/jQuery，那么做起来会容易得多。下面是一个仅使用 HTML 和 CSS 来完成您需要的示例:

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;
}

<div class="tabs">    		
  <div class="tab" id="tab1">
    <a href="#tab1">Tab 1</a>
    <div class="content">Content of Tab1</div>
  </div>    
  <div class="tab" id="tab2">
    <a href="#tab2">Tab 2</a>
    <div class="content">Content of Tab2</div>
  </div>    		
  <div class="tab" id="tab3">
    <a href="#tab3">Tab 3</a>
    <div class="content">Content of Tab3</div>
  </div>    	
</div>