我可以在更改URL的同时使用jQuery .load吗？

Question

What i want to achieve

I want to be able to shift seamlessly through the different posts in the sidebar on this website, while having using a custom post template for my posts. And by seamlessly i mean that the screen doesn't go white for a second every time you navigate it.

My problem

single.php or single-{slug}.php does not work, since the URL doesn't change while navigating the sidebar

Plugins i am using

Custom Post Type UI

Ajax Content Renderer

jQuery script for my sidebar

$(document).ready(function() {
    $("#sidebar li:has(a)").click(function() {

        var page = $("a:first",this).attr("href");

        $("#content").load(page);
        return false;
    });
});

HTML & PHP for sidebar and content area

<div class="row"> <!-- Main content row -->
    <div class="col-md-4" id="sidebar">
        <?php
        if (is_page('gulvservice')){
            wp_nav_menu(array('menu'=>'gulvservice' ));
        } elseif (is_page('malerservice')) {
            wp_nav_menu(array('menu'=>'malerservice' ));
        } elseif (is_page('industrilakering')) {
            wp_nav_menu(array('menu'=>'industrilakering' ));
        }
        ?>
    </div>

    <div class="col-md-8" id="content">
        <?php  if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <div class="title"><h1>
                    <?php the_title(); ?>
                </h1></div>
            <div class="div">
                <?php
                if( has_post_thumbnail() ) {
                    the_post_thumbnail();
                }
                ?>
            </div>
        <?php endwhile; endif; ?>
    </div>
</div>
</div> <!-- Main Content -->

Answer 1

Need to prevent the event on the <a>. So it would be better to move the selector to those elements

Try:

$(document).ready(function() {
  $("#sidebar li a").click(function() {
    var page = $(this).attr("href");
    $("#content").load(page);
    return false;
  });
});