How do I get a simple jQuery code to replace my current Javascript -

goal : when click link on navigation show spinning image until script loaded.

function ahah(url, target) {   document.getelementbyid(target).innerhtml = '<img src="loading.gif" />';   if (window.xmlhttprequest) {     req = new xmlhttprequest();   } else if (window.activexobject) {     req = new activexobject("microsoft.xmlhttp");   }   if (req != undefined) {     req.onreadystatechange = function() {ahahdone(url, target);};     req.open("get", url, true);     req.send("");   } }    function ahahdone(url, target) {   if (req.readystate == 4) { // if req "loaded"     if (req.status == 200) { // if "ok"       document.getelementbyid(target).innerhtml = req.responsetext;     } else {       document.getelementbyid(target).innerhtml=" ahah error:\n"+ req.status + "\n" +req.statustext;     }   } }  function load(name, div) {     ahah(name,div);     return false; } 

on link

<a href="wrapper.html" onclick="load('file1.html','content');return false;">file 1</a> <a href="wrapper.html" onclick="load('file2.html','content');return false;">file 2</a> 

on content wrapper

<div id="content"></div> 

let me know simple way on jquery.

assuming each <a href="wrapper.html"> element corresponds sequentially file-n.html, this:

$(function() {     var content = $('#content');      $('a[href="wrapper.html"]').each(function( ) {         var name = "file" + (i + 1) + '.html';          $(this).click(function( e ) {             e.preventdefault();             content.html( '<img src="loading.gif" />' );             $.ajax({                 url: name,                 datatype: 'html',                 success: function( data ) {                     content.html( data );                 },                  error: function(xhr, status, error) {                     content.html( "error:\n" + status + "\n" + error;                 }             });         });     }); }); 

of course, don't forget include jquery library first.