CSS网格：如何使用CSS或JavaScript以CSS网格单元为目标_Javascript_Jquery_Css_Html

CSS网格：如何使用CSS或JavaScript以CSS网格单元为目标

javascript jquery css html

CSS网格：如何使用CSS或JavaScript以CSS网格单元为目标,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我试图通过使用CSS网格来模拟页面。引用的页面有两列。左侧列包含链接，右侧列是每个链接的目标帧；单击链接时，该链接的内容将在右侧列中打开我已经研究了该页面背后的代码，我有一些问题：我想使用CSS网格创建一个类似的两列布局。我无法从css代码判断该页面是否使用css网格或其他布局方法左栏中的链接如何在右栏中打开？我已经被告知，无法单独使用CSS将另一个带有超链接的CSS网格单元作为目标（请参阅）。这种效果是通过JavaScript还是jQuery实现的？如果是，如何做到总之，他们是如何做到

我试图通过使用CSS网格来模拟页面。引用的页面有两列。左侧列包含链接，右侧列是每个链接的目标帧；单击链接时，该链接的内容将在右侧列中打开

我已经研究了该页面背后的代码，我有一些问题：

我想使用CSS网格创建一个类似的两列布局。我无法从css代码判断该页面是否使用css网格或其他布局方法

左栏中的链接如何在右栏中打开？我已经被告知，无法单独使用CSS将另一个带有超链接的CSS网格单元作为目标（请参阅）。这种效果是通过JavaScript还是jQuery实现的？如果是，如何做到

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

谢谢你的帮助

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

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

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

使用AJAX，这是微不足道的。检查一下我的手机，它就可以了。只有60行代码以这种方式进行路由

总而言之，他们是如何做到的，我可以用CSS网格布局>单独使用CSS，或者用JavaScript/jQuery做同样的事情吗

参考资料的页面使用Ajax与jQuery和CSS

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

使用此脚本，您可以轻松地从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>


var newHash=“”，
$mainContent=$（“#content”）；
$（'nav'）。委托（'a'，'click'，函数（）{
window.location.hash=$（this.attr（'href'）；
返回false；
});
//并非所有浏览器都支持hashchange
//对于较旧的浏览器支持：http://benalman.com/projects/jquery-hashchange-plugin/
$（窗口）.bind（'hashchange'，function（）{
newHash=window.location.hash.substr（1）；
$mainContent.load（newHash+“#content>*”）；
});

这是页面的完整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>


演示页
家
这是主页

我是一个列表项
我也是

var newHash=“”，
$mainContent=$（“#content”）；
$（'nav'）。委托（'a'，'click'，函数（）{
window.location.hash=$（this.attr（'href'）；
返回false；
});
//并非所有浏览器都支持hashchange
//对于较旧的浏览器支持：http://benalman.com/projects/jquery-hashchange-plugin/
$（窗口）.bind（'hashchange'，function（）{
newHash=window.location.hash.substr（1）；
$mainContent.load（newHash+“#content>*”）；
});

文档。querySelector（）

可用于任何有效的HTML、CSS网格或非HTML网格。您可以根据需要对页面进行布局。CSS网格、Flexbox或浮动都可以实现这一点。菜单导航需要Javascript或JS库（JQuery或其他）。最重要的是，请尝试一下你自己。。。试试。。。。如果您有问题，SO会帮助您，但请尝试并发布您的尝试。谢谢，TJ。这很有帮助。根据上面的评论，我这样做了，成功了。我将占位符文本放在一个网格单元中名为“C2”的ID中。要替换该内容，只需执行以下操作：document.querySelector（“#C2”）.innerHTML=X；}其中X是一个带有替换文本的变量字符串。我的问题是，基于AJAX的方法比这有什么优势吗？它是否更易于使用或维护？非常感谢你的意见。