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

【问题标题】：show/hide content using jquery or ajax使用 jquery 或 ajax 显示/隐藏内容
【发布时间】：2012-08-20 09:55:18
【问题描述】：

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

【问题讨论】：

请告诉我一件事，您的内容（CAD、FEA、MATLAB 等）来自数据库或者它是静态 html，然后我可以解决您的问题
好的抱歉，要加载的内容只是静态html

标签： jquery html css ajax dynamic

【解决方案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>

现在让我们监听这些链接的点击事件，然后异步加载链接目标的内容，并将异步调用的结果加载到我们的内容 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 中所有带有 css 类名称 ajaxLink 的标签的 click 事件。每当点击事件发生时，内部代码就会执行。

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

更多关于 jQuery 选择器here.

#2 : 我们将异步加载内容，而不会将页面实际导航到目标 url。所以我们需要防止链接点击的默认行为。我们正在使用preventDefault 方法（用jQuery 库编写）来执行此操作。因此页面将保持原样。无需重新加载。

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

#4 : 我们正在使用 load 方法（在 jQuery 中）进行 ajax 调用；该方法会加载目标url的内容，并将其设置为id为divContentArea的div的内部html。

我建议您使用一些示例代码。将 alert/console.debug 放在变量/对象上，看看会有什么价值。这是学习这个的最好方法。祝你好运。

最后声明（纯属个人）： jQuery 是我最近看到的最好的东西之一。

【讨论】：

我很确定您的意思是 link 而不是 lick - 所以我修复了它.. 并 +1 以获得彻底的解释
@wirey：谢谢。是的。这是一个错字
非常感谢！你的解释太棒了！对不起，如果这有点低于你，但我阅读了 w3schools 对 ajax 的解释以及所有示例等，它并没有完全点击，这让它变得更加清晰！现在，我阅读了下面的其他 cmets，他们似乎认为最好只使用 jquery 来显示/隐藏基于锚点的各种内容。我想知道这样会不会更好？还是更喜欢使用 AJAX？我正在加载的内容是静态的 btw
如果是小内容，你可以在初始页面加载时加载，然后在第一页加载它并显示隐藏，否则执行 ajax。它也有一些内置的缓存。所以它并没有那么慢

【解决方案2】：

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

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

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

就是这样。

【讨论】：

【解决方案3】：

Here 是使用 jquery 库简单显示和隐藏问题的工作示例

【讨论】：

【解决方案4】：

实际上，我不认为纯 Ajax 是这种情况下的最佳解决方案。原因之一是在浏览器中禁用了 javascript 的人将无法浏览您的网站。其次，也许更重要的是，你在搜索引擎上的得分会很差，因为爬虫通常不运行 javascript，因此不会索引你的大部分内容。

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

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

【讨论】：