javascript - CSS 网格 : how to target CSS Grid cell using CSS or JavaScript

Question

我正在尝试模拟位于 https://stripe.com/docs 的页面通过使用 CSS 网格。引用的页面有两列。左侧栏包含链接，右侧栏是每个链接的目标框架；单击链接时，该链接的内容会在右侧栏中打开。

我研究了那个页面背后的代码，我有一些问题:

1. 我想使用 CSS Grid 创建类似的两列布局。如果该页面使用 css 网格或其他一些布局方法，我无法从 css 代码中判断出来。

2. 左栏中的链接如何在右栏中打开？我已经被告知无法单独使用 CSS 以超链接定位另一个 CSS Grid 单元格(请参阅 CSS Grid: how to make grid cell a hyperlink target? )。这种效果是用 JavaScript 还是 jQuery 实现的？如果可以，怎么办？

总结一下，他们是如何做到的，我可以单独使用 CSS 或使用 JavaScript/jQuery 对 CSS 网格布局做同样的事情吗？

感谢您的帮助。

Answer 1

if that page uses css grid or some other layout method.

左侧和右侧“列”只是那里的两个绝对定位的元素容器 - 这是使用的“手动布局”。

How do the links in the left column open in the right column?

使用 AJAX 是微不足道的。查看我的SPApp implementation做到了。只有 60 行代码以这种方式进行路由。