Drupal7 jQuery AJAX Load Content No Page Refresh

Question

I am trying to get an AJAX script working on my page (working with Drupal 7). The content of the page should be loaded when clicking my menu links, but the page shouldn't be refreshed (this will interfere with a different script in jQuery that animates the banner)

Here is the source code:

    (function ($, Drupal) {

    jQuery.error = console.error;

    $("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: "../css/pages.css"
    }).appendTo("head");

    $(document).ready(function()
    {
      $('.menu-704,.menu-797,.menu-359,.menu-796').click(function()
      {
         $('#main').load('linktopage.html');
      });
});

    })(jQuery, Drupal);

Now, this does work, but I experience the following problems:

• Whenever I click on a navigation link, the whole div#main is moved down for some unknown reason
• Doing this duplicates the logo that I added via the Appearance settings in Drupal

Answer 1

如果链接是主题页面，请尝试更改为$（'＃main'）。load（'linktopage.html #main'）