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

【问题标题】：CSS Grid: how to make grid cell a hyperlink target?CSS Grid：如何使网格单元成为超链接目标？
【发布时间】：2019-01-23 20:06:06
【问题描述】：

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

我认为我可以对已加载到 Cell2 中的内容使用书签，但我更喜欢在单击链接时在右侧单元格中显示内容的方法，而不使用书签。

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

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

【问题讨论】：

能否请您添加相关代码，因为当您不知道如何提供帮助时很难提供帮助

标签： css html css-grid

【解决方案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>

【讨论】：

非常感谢您的回答。我希望在没有 javascript 的情况下做到这一点，所以我会实现你的想法，看看它是否有效。否则它必须是javascript。我会在这里发帖让你知道它是怎么回事。再次感谢。
亚当，我可能在你的回答中遗漏了一些东西。我在这里没有看到 CSS 网格布局。
@RTC222 该示例利用单击元素的上下文来识别应显示哪个内容块。如果您希望避免此限制，则需要使用 JavaScript，因为这将允许您指定所需内容在 DOM 中的位置。