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

Question

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

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

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

• 如果我们想选择一个带有 ID 的元素，我们使用 $("#elementID")，其中 elementID 是该元素的 CSS ID。

  <

更多关于 jQuery 选择器的信息 here .

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

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

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

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

最后声明(纯属个人): jQuery 是我最近看到的最好的东西之一。