Question

I’ve been searching for a solution for last couple days and since I couldn’t find one I thought I’d go ahead and see if anyone on here can help. I’m trying to have the content from external html pages (same domain – just separate pages, ie) about.html, contact.html, etc) show up on my main index.html page within the div #topContent when the various nav links are clicked (ie. About, contact, etc). I’m hoping by storing the site’s “main content” on external pages I can avoid refreshes between nav selections.

So far I’m able to make the default page load (an external – main.html doc), but for some reason when I click the nav links I am redirected to another page which creates an error because the “.html” is stripped away from the path (Expecting to see: site.com/about.html — Actually shows: site.com/about )

My current changes are live here: http://staging-site.site44.com/ and I would create a jsFiddle file, but this setup involves loading multiple html files so I don’t think I can do that with jsFiddle.

Any help would be much appreciated!

Thanks!

HTML

    <nav id="headerNav">

            <ul class="navList">
                <li class="navItem"><a href="products" id="home" class="nav">Products</a></li>
                <li class="navItem"><a href="about" id="about" class="nav">About</a></li>
                <li class="navItem"><a href="portfolio" id="portfolio" class="nav">Portfolio</a></li>
                <li class="navItem"><a href="contact" id="contact" class="nav">Contact</a></li>
            </ul> 

        </nav>


    </div>

</div>

<!-- topMain -->
<div id="topContentWrapper">

     <div id="topContent">





    </div>



</div>

JS

$(document).ready(function() {
// Load default page content of main.html
$("#topContent").load("main.html");

$("#home").click(function() {
//load home.html on click
    $("topContent").load("home.html");
});

$("#products").click(function() {
//load home.html on click
    $("topContent").load("products.html");
});

$("#about").click(function() {
//load home.html on click
    $("topContent").load('about.html #topContent');
});

$("#portfolio").click(function() {
//load home.html on click
    $("topContent").load("portfolio.html");
});
 });

Answer 1

Your Javascript is wrong:

$(document).ready(function() {
// Load default page content of main.html
$("#topContent").load("main.html");

$("#home").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("home.html");
});

$("#products").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("products.html");
});

$("#about").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load('about.html');
});

$("#portfolio").click(function(e) {
//load home.html on click
    e.preventDefault();
    $("#topContent").load("portfolio.html");
});
 });

you were missing the “#” selector in your jQuery. Thus, your click wasn’t able to load anything into the topContent element. Also you need to add e.preventDefault() to prevent the links from attempting to follow the href when clicked.