使用jQuery或AJAX显示/隐藏内容

本文介绍了使用jQuery或AJAX显示/隐藏内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前我设计一个网页链接。在该网站上的项目选项卡中我遇到了一个问题，因为我没有经验在正确的协议（对不起）。在侧面菜单中有将是一个选项，选择一些内容进行显示（计算机辅助设计，有限元分析，MATLAB，等。），然后取其选择将显示在该网站的主要内容部分。我遇到的问题是，当我使用JavaScript / jQuery的让所有的内容，共1页，然后显示/隐藏各个部分使用锚作为用户选择，页面加载速度很慢，因为有相当多很多的内容。我想知道，如果它是更好地使用AJAX的情况下，如这一点，如果是的话，我将如何去加载的内容部分在这个新的内容（使用iframe或创建一个新的页面？我不知道阿贾克斯好，不过也很愿意/渴望学习的），或者最好是留在标准的jQuery显示/隐藏，如果是这样，是什么让pferred那么另一个更$ P $？这个内容我加载将是静态内容BTW

currently I am designing a webpage link. On the projects tab of the site I am running into an issue since I am inexperienced in proper protocol (sorry). On the side menu there is going to be an option to select for some content to be displayed (CAD, FEA, MATLAB, ect.) and then whichever is selected will be displayed in the main content section of the site. The problem I am running into is that when I use javascript/jquery to have all of the content on 1 page and then show/hide the various sections as the user selects using anchors, the page loads very slowly since there is quite alot of content. I was wondering if it is better to use AJAX for a situation such as this and if so, how would I go about loading this new content within the content section (use an iframe or create a new page?i dont know ajax well yet but am willing/eager to learn) or if it is better to stay with standard jquery show/hide and if so, what makes one more preferred then the other? This content I am loading is going to be static content btw

You can use jQuery ajax to load the content on demand. load method is apt for this.

我认为你是混淆使用jQuery和Ajax。 jQuery是一个JavaScript库，使我们的生活更轻松。没有jQuery的同时，你可以做AJAX，但正如我所说的，它使我们的生活更轻松。所以我们要利用这一点。

I think you are confused with jQuery and ajax. jQuery is a javascript library to make our life easier. Without jQuery also, you can do ajax, but as i said, it makes our life easier. so we are gonna use that.

假设你有一些类似这样的标记在你的主页显示链接或菜单和另一个分区，以显示链接的内容和你包括jQuery库也在这个页面。

Assuming you have some markup like this in your main page to show the Links or menus and another div to show the content of the links and You included the jQuery library also in this page.

<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的结果。

Now Let's Listen to the click event of any of these links and then load the content of the target of the links asynchronously and load the result of the async call to our content div.

将此javasctipt

Add this 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 我们正在寻找的点击在CSS类名ajaxLink DOM事件的所有标签中。每当一个点击事件发生的内在code将执行。

What Are we doing here ?

#1 : We are looking for the click event of all the a tag in the DOM with a css class name ajaxLink. Whenever a click event happens to those the inner code will execute.

如果我们要选择的元素（S）与类名，我们使用 $（类名），其中的className是的CSS类名的元素。在我们的例子中，我们告诉jQuery来给我们使用该类名称的所有锚标记。

If we want to select element(s) with class name, we use $(".className"), where className is the CSS class name of the element. In our example, we are telling jquery to give us all anchor tag with that class name.

如果我们要选择一个元素）与ID，我们使用 $（＃elementID），其中elementID是元素的CSS ID。

If we want to select an element) with ID, we use $("#elementID"), where elementID is the CSS ID of the element.

更多关于jQuery选择这里。

More about jQuery selectors here.

2 我们将异步加载的内容，而页面是真正定位到目标URL。因此，我们需要prevent的链接点击的默认行为。我们使用的是 preventDefault 方法（用jQuery库）办本。所以页面会留下，因为它is.No重新载入。

#2 : We are going to Load the content asynchronously without the page being actually navigate to the target url. So we need to prevent the default behaviour of a link click. we are using the preventDefault method (written in jQuery library) to do this. so the page will stay as it is.No reload.

＃3：：我们正在读的href 属性我们链接的价值并设置这个值的局部变量。 $ <$ C C $>（本）表示当前激活的项目。因为我们正在一个锚标记的碰杯事件中， $（本）表示点击的锚元素。

#3 : We are Reading the href property value of our link and setting that value to a local variable. $(this) means the current activated item. Because we are working inside the clink event of an anchor tag, $(this) means the clicked anchor element.

＃4：我们正在Ajax调用使用负荷方法（在jQuery的）;该方法将加载目标URL的内容，并将其设置为ID为DIV divContentArea 。

#4 : We are making an ajax call using the load method (in jQuery); This method will load the content of the target url and set it as the inner html of the div with Id divContentArea.

我推荐你用一些示例code打。放在变量/对象警报/ console.debug，看看什么样的价值来了。这是学习最好的方法。祝您好运。

I recommend you to play with some sample code. Put alert/ console.debug on variables/objects and see what value coming. That is the best way to learn this. Good Luck.

最后一条语句（纯属个人）：的 jQuery是我最近看到的最好的事情之一的

Last statement (purely personal) : jQuery is one of the best thing i have seen recently.

这篇关于使用jQuery或AJAX显示/隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

elementId