Javascript 使用jQuery隐藏/显示内容

我有一个网站，基本上显示了一个商业机构的相关信息。我不想有一个多页面的网站（关于我们，联系我们和其他类似的网页），但我有相当数量的内容要显示

而且我不希望通过AJAX从服务器连续获取内容来一次又一次地加载内容

因此，我可以在第一次加载时加载所有内容，并且只显示（可见）所需的内容，并使用jQuery隐藏和显示适当的内容。这是一种可以采用的适当方法吗？它可能有哪些缺点？

<a href="#about-us" title="About Us">About Us</a>

<div id="about-us" class="content">Some content here</div>


<script>
    $(document).ready(function(){
        $('a').click(function(){
            var link = $(this).attr('href');
            $('.content').hide();
            $(link).show();
        });
    });
</script>

这里有一些内容
$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
var link=$（this.attr（'href'）；
$（'.content'）.hide（）；
$（link.show（）；
});
});

这里有一些内容
$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
var link=$（this.attr（'href'）；
$（'.content'）.hide（）；
$（link.show（）；
});
});

您的要求可以通过以下单页框架实现： 还是安格拉斯

优点：

• 前端立即访问所有内容

缺点：

• 长页面加载可能导致404或连接速度慢
• 依赖于用户设备。如果用户没有当前浏览器，则您的页面可能会中断
• 客户端可能没有启用JavaScript，完全破坏了您的网站
• 如果存在大量数据，则用户设备可能无法处理。JavaScript在较旧的设备上可能非常麻烦

编辑1

我个人对单页解决方案的偏好是AngularJS，因此如果您对此感兴趣，我建议您使用本教程：

---

scotch.io/tutorials/带有angularjs路由和模板的单页应用程序

您的要求可以通过单页框架实现，如： 还是安格拉斯

优点：

• 前端立即访问所有内容

缺点：

• 长页面加载可能导致404或连接速度慢
• 依赖于用户设备。如果用户没有当前浏览器，则您的页面可能会中断
• 客户端可能没有启用JavaScript，完全破坏了您的网站
• 如果存在大量数据，则用户设备可能无法处理。JavaScript在较旧的设备上可能非常麻烦

编辑1

我个人对单页解决方案的偏好是AngularJS，因此如果您对此感兴趣，我建议您使用本教程：

---

scotch.io/tutorials/带有angularjs路由和模板的单页应用程序

可以做到这一点，但您可能希望使用类似knockout.js的库，而不仅仅是使用jQuery。然而，在大量内容中使用隐藏div不是一个好的做法：它会降低页面加载速度，很难维护，而且对于屏幕阅读器和SEO来说可能会很困难。我对你的问题投了否决票，因为它非常广泛——这是可能的，但是你可能想使用像knockout.js这样的库，而不是仅仅使用jQuery。然而，在大量内容中使用隐藏div不是一个好的做法：它会降低页面加载速度，很难维护，而且对于屏幕阅读器和SEO来说可能会很困难。我否决了你的问题，因为它非常广泛