CSS Grid：如何使用 CSS 或 JavaScript 定位 CSS Grid 单元格答案

【问题标题】：CSS Grid: how to target CSS Grid cell using CSS or JavaScriptCSS Grid：如何使用 CSS 或 JavaScript 定位 CSS Grid 单元格
【发布时间】：2018-08-17 19:24:01
【问题描述】：

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

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

我想使用 CSS Grid 创建一个类似的两列布局。我无法从 css 代码中判断该页面是否使用 css 网格或其他布局方法。
左栏中的链接如何在右栏中打开？我已经被告知，没有办法单独使用 CSS 来定位另一个带有超链接的 CSS Grid 单元格（参见CSS Grid: how to make grid cell a hyperlink target?）。这个效果是用 JavaScript 还是 jQuery 实现的？如果是这样，怎么办？

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

感谢您的帮助。

【问题讨论】：

document.querySelector() 可用于任何有效的 HTML、CSS 网格或不使用。您可以根据需要对页面进行布局。 CSS Grid、Flexbox 或 Floats 都可以做到这一点。菜单导航需要 Javascript 或 JS 库（JQuery 或其他）。最重要的是，请尝试自己...尝试尝试尝试....如果您尝试有问题，SO 会帮助您，但请尝试然后发布您的尝试
谢谢，TJ。这有帮助。

标签： javascript jquery css html

【解决方案1】：

如果该页面使用 css 网格或其他一些布局方法。

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

左栏中的链接如何在右栏中打开？

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

【讨论】：

根据上面发表的评论，我这样做了，成功了。我将占位符文本放在一个网格单元格中名为“C2”的 ID 中。要替换该内容，只需执行以下操作： document.querySelector("#C2").innerHTML = X;} 其中 X 是带有替换文本的变量字符串。我的问题是，您的基于 AJAX 的方法是否有任何优势？使用或维护会更容易吗？非常感谢您的意见。

【解决方案2】：

总结一下，他们是怎么做的，我可以用 CSS 网格布局做同样的事情 > 单独使用 CSS，还是使用 JavaScript/jQuery？

您的参考页面使用 Ajax 与 jQuery 和 CSS。

您可以像在这个 plunker 中那样简单地执行此操作：

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>

【讨论】：