CSS Grid：如何使网格单元成为超链接目标？ [英] CSS Grid: how to make grid cell a hyperlink target?

问题描述

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

I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clicked, I want the content to open in the right column (Cell2).

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

I think I could use bookmarks to content already loaded into Cell2, but I prefer a way to display content in the right cell when a link is clicked, without using bookmarks.

使用CSS网格布局，除了包含超链接的单元格外，还有什么方法可以指定单击超链接时应在其中放置内容的单元格。书签还是其他？

Using a CSS Grid layout, is there any way to designate a cell where content should go when a hyperlink is clicked, other than the cell that contains the hyperlinks -- using bookmarks or anything else?

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

Thanks very much for any info.

推荐答案

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

Yes, this is possible, but is much easier to do if you are permitted to use JavaScript/jQuery. Here is an example of using HTML and CSS only to accomplish what you need:

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>

这篇关于CSS Grid：如何使网格单元成为超链接目标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！