Override <a href=“”> when using jquery .load to get content

Question

I've got a few pages, all with different content, the pages are all linked in the nav using relative path tags. What I'd like to do from a usability point of view is to use jquery .load to get the content from the other pages and load it into the main index page. So it wouldn't have to change pages.

I would like do is show :

<a id="show-services" href="our_services.html">OUR SERVICES</a>

for SEO / users with js turned off, but actually, load the content in using (below) for usability / UI purposes

google.load("jquery", "1.6.2");

google.setOnLoadCallback(function() {
$("#show-services").click(function(){
    $(".content").load("our_service.html .content");
    return false;
    });
});

so have the .load override the HTML a tag even though the HTML a tag is showing (so that a spider will still see the site's structure.

Answer 1

I think what you're looking for is e.stopPropagation or e.preventDefault. This would stop the event from bubbling up i.e. the action of clicking a anchor, since you are applying the events with js. If the user doesn't have js enabled the code won't run so the action will fallback to anchors default behavior.

$("#show-services").click(function(e){
    e.preventDefault;
    $(".content").load("our_service.html .content");
    return false;
    });
});

Answer 2

If your're going to have multiple links that work this way on your page, I'd suggest giving them all a certain classname, so that you can target them all collectively:

$("nav").on("click", ".asyncLoad", function(event){
  event.preventDefault();
  $(".content").load( event.target.href + ' .content' );
});

This assumes the links are all within a <nav> element:

<nav>
  <ul>
    <li><a class="asyncLoad" href="home.html">Home</a></li>
    <li><a class="asyncLoad" href="our_services.html">Our Services</a></li>
    <li><a class="asyncLoad" href="contact_us.html">Contact us</a></li>
  </ul>
</nav>