Question

目前我正在设计一个网页link。在网站的项目标签上，我遇到了一个问题，因为我没有正确的协议（对不起）。在侧面菜单上，可以选择要显示的某些内容（CAD，FEA，MATLAB等），然后选择的任何一个将显示在网站的主要内容部分中。我遇到的问题是，当我使用javascript / jquery将所有内容放在1页上，然后在用户选择使用锚点时显示/隐藏各个部分时，页面加载速度非常慢，因为内容非常多。我想知道在这种情况下使用AJAX是否更好，如果是这样，我将如何在内容部分中加载这些新内容（使用iframe或创建新页面？我不知道ajax好吧，但我愿意/渴望学习）或者如果最好继续使用标准的jquery show / hide，如果是的话，是什么让一个人更喜欢另一个？我加载的这个内容将是静态内容btw

Answer 1

您可以使用jQuery ajax按需加载内容。 load方法适用于此。

我认为你对jQuery和ajax感到困惑。 jQuery是一个javascript库，让我们的生活更轻松。如果没有jQuery，你可以做ajax，但正如我所说，它让我们的生活更轻松。所以我们会用它。

假设您的主页面中有一些这样的标记用于显示链接或菜单，另一个div用于显示链接的内容，您还在此页面中包含了jQuery库。

<div class="divNavigation">
  <a href="about.html" class="ajaxLink" >About</a>
  <a href="about.contact" class="ajaxLink">Contact</a>
  <a href="about.team" class="ajaxLink">Team</a>
</div>
<div id="divContentArea">
</div>

现在让我们聆听任何这些链接的click事件，然后异步加载链接目标的内容，并将异步调用的结果加载到我们的内容div。

添加此javasctipt

<script type="text/javascript">

  $(function(){ 

       $("a.ajaxLink").click(function(e){    // #1
          e.preventDefault();                     // #2
          var linkTargetUrl=$(this).attr("href");   // #3
          $("#divContentArea").load(linkTargetUrl);  // #4

       });    
  });

</script>

我们在这做什么？

＃1：我们正在寻找DOM中所有标签的click事件，并使用css类名称ajaxLink。只要发生点击事件，内部代码就会执行。

如果我们想要选择具有类名的元素，我们使用$(".className")，其中className是元素的CSS类名。在我们的示例中，我们告诉jquery为我们提供具有该类名的所有锚标记。
如果我们要选择带ID的元素），我们使用$("#elementID")，其中elementID是元素的CSS ID。

有关jQuery选择器here的更多信息。

＃2：我们将异步加载内容，而不会将页面实际导航到目标网址。所以我们需要阻止链接点击的默认行为。我们使用preventDefault方法（用jQuery库编写）来做到这一点。所以页面将保持不变。没有重新加载。

＃3：我们正在读取链接的href属性值并将该值设置为局部变量。 $(this)表示当前激活的项目。因为我们在锚标记的clink事件中工作，$(this)表示单击的锚元素。

＃4：我们正在使用load方法（在jQuery中）进行ajax调用;此方法将加载目标网址的内容，并将其设置为ID为divContentArea的div的内部html。

我建议你玩一些示例代码。将alert / console.debug放在变量/对象上，看看会有什么价值。这是了解这一点的最佳方式。祝你好运。

最后一句话（纯粹是个人的）： jQuery是我最近见过的最好的事情之一。

Answer 2

尝试使用Ajax，确保每个包含的内容都可以分开加载，就像使用iframe一样。

创建一个内容容器，然后使用Jquery ajax

$.ajax({
  url: 'targethtml.html',
  success: function(data) {
    $('#containerid').html(data);
  }
});

就是这样。

Answer 3

Here是使用jquery库

简单显示和隐藏问题的工作示例

Answer 4

Actualy我不认为纯Ajax是这种情况下的最佳解决方案。一个原因是，在浏览器中禁用javascript的用户将无法浏览您的网站。其次，甚至更重要的是你在搜索引擎上得分非常差，因为抓取工具通常不会运行javascript，因此不会为你的大部分内容编制索引。

我建议你使用一套标准的html / php页面。您可以为每个页面上的内容创建一个基页，例如菜单，页眉，页脚和布局。在此模板中，您可以包含每个页面不同的内容，即您现在在内容区域中加载的文本和html。这可以通过像php这样的服务器端脚本轻松完成。实现并不难，并使代码易于维护。拥有实际不同的页面将解决上面描述的非js用户和SEO的问题。

一旦你设置了这个结构，你仍然可以按照@Shyju描述的方式使用ajax，为用户提供更好的js体验。您必须将菜单中的链接设置为非js用户的实际页面，然后您可以使用jQuery以已经演示的方式覆盖它们。您所要做的就是进行Ajax调用，获取保存页面特定内容的页面。这可能很容易与服务器端脚本用于包含在页面模板

中的页面相同

使用jquery或ajax显示/隐藏内容

4 个答案:

我们在这做什么？