CSS Grid:如何使用CSS或JavaScript定位CSS网格单元格
CSS Grid:如何使用CSS或JavaScript定位CSS网格单元格
提问于 2018-08-18 03:24:02
我正在尝试通过使用CSS Grid来模拟https://stripe.com/docs的页面。引用的页面有两列。左侧列包含链接，右侧列是每个链接的目标框架；单击链接时，该链接的内容将在右侧列中打开。
我已经研究了该页面背后的代码，我有一些问题：
- 我想使用CSS Grid创建一个类似的两列布局。我不能从css代码中判断该页面是使用css网格还是其他布局方法。
- 如何打开左列中的链接在右列中打开？我已经被告知，没有办法只使用CSS (参见CSS Grid: how to make grid cell a hyperlink target?)来指向另一个带有超链接的CSS Grid单元格。这种效果是通过JavaScript还是jQuery实现的？如果是这样的话，怎么做呢？
所以总结一下，他们如何做到这一点，我能对CSS网格布局单独使用CSS或JavaScript/jQuery做同样的事情吗？
谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-18 03:42:17
如果该页面使用css grid或其他布局方法，则为
。
左边和右边的“列”只是两个绝对定位的元素-容器在那里-使用的是“手动布局”。
左列中的链接如何在右列中打开？
使用AJAX，这是微不足道的。检查我的SPApp implementation，它可以做到这一点。只有60行代码以这种方式进行路由。
Stack Overflow用户
发布于 2018-08-20 16:19:36
总结一下，他们是如何做到的，我能用CSS网格布局做同样的事情吗？
您参考的页面使用带有jQuery和CSS的Ajax。
您可以简单地像在这个柱塞中这样做：
http://plnkr.co/edit/bw6rKV1zGEQ1oHoWuHnV?p=preview
点击此脚本，您可以轻松地从html页面加载内容：
<script>
var newHash = '',
$mainContent = $('#content');
$('nav').delegate('a', 'click', function() {
window.location.hash = $(this).attr('href');
return false;
});
// Not all browsers support hashchange
// For older browser support: http://benalman.com/projects/jquery-hashchange-plugin/
$(window).bind('hashchange', function() {
newHash = window.location.hash.substr(1);
$mainContent.load(newHash + " #content > *");
});
</script>这是该页面的完整html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="menu">
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</div>
<div id="content">
<h1>Home</h1>
<p>This is the home page.</p>
<ul>
<li>I'm a list item!</li>
<li>Me too!</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
var newHash = '',
$mainContent = $('#content');
$('nav').delegate('a', 'click', function() {
window.location.hash = $(this).attr('href');
return false;
});
// Not all browsers support hashchange
// For older browser support: http://benalman.com/projects/jquery-hashchange-plugin/
$(window).bind('hashchange', function() {
newHash = window.location.hash.substr(1);
$mainContent.load(newHash + " #content > *");
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51901730
复制相关文章
相似问题