show/hide content using jquery or ajax

问题

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

回答1:

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

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.

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>

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.

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>

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.

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.
If we want to select an element) with ID, we use $("#elementID"), where elementID is the CSS ID of the element.

More about jQuery selectors here.

#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 : 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 : 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.

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.

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

回答2:

Try using Ajax, make sure each included content can be loaded separated, just like if you are doing using iframe.

Create a content container, then use Jquery ajax

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

that is it.

回答3:

Here is the working example of your problem simple show and hide using jquery library

回答4:

Actualy i don't think pure Ajax is the best solution in this case. One reason is that people with javascript disabled in their browser will not be able to navigate your site. Second and perhaps even more important is that you will score very bad on search engines, as crawlers don't usually run javascript and therefore will not index most of your content.

I would advise you to work with a standard set of html/php pages. You could make a base page for the content that is the same on each page, things like menu, header, footer and layout. In this template you can then include the content that is different for each page, that would be the text and html you are now loading in your content area. This can easily be done with some server side script like php. It is realy not hard to achieve and keeps your code easy to maintain. Having actual different pages will solve the issues with none-js users and SEO i described above.

Once you have set up this structure, you can still use ajax the way it is described by @Shyju, to give users with js a better experience. You would have to set the links in the menu to the actual pages for non-js users, and then you can overwrite them with jQuery the way it is already demonstrated. All you would have to do is make the Ajax call fetch the pages that hold your page specific content. This could easily be the same pages that your server side script uses to include in the page template

来源：https://stackoverflow.com/questions/12116100/show-hide-content-using-jquery-or-ajax

标签

jquery

html

css

ajax

dynamic