CSS Grid:如何使网格单元格成为超链接目标？
CSS Grid:如何使网格单元格成为超链接目标？
提问于 2018-08-17 03:36:02
我正在使用CSS grid设计一个简单的两列布局；网格区域名为Cell1和Cell2。在左列(Cell1)中，我想要一个超链接列表；当单击一个超链接时，我想要在右列(Cell2)中打开内容。
我认为我可以使用书签来显示已经加载到Cell2中的内容，但我更喜欢一种在点击链接时在右侧单元格中显示内容的方式，而不是使用书签。
使用CSS Grid布局，除了包含超链接的单元格之外，有没有其他方法可以指定单击超链接时内容所在的单元格--使用书签或其他任何东西？
非常感谢您提供的信息。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-17 03:50:08
是的，这是可能的，但如果您被允许使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51884227
复制相关文章
相似问题