How To Change Content Without Reloading The Page?

Ok, so lets say that I have navbar eg.

• home
• about me
• contact
and I have a con

Solution 1:

You can use Ajax.

But if you're total beginner, another solution without Ajax :

• put all your content in a single file

• put IDs on your div, related to the content (div containing "about" content = div#about)

• just toggle the div on click, related to the content

Like this (JS with jQuery) :

$(document).ready(function(){
  $('nav a').click(function(){
    var dest = $(this).attr('href');
    $('div.content').fadeOut(); // Hide all content divs
    $(dest).fadeIn(); // Show the requested part
    // You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
  return false;  
});
});

HTML updated:

<ul> <li class="selected"><a href="#home">home</a></li> <li><a href="#about">about me</a></li> <li><a href="#contact">contact</a></li> <ul>

If you had no idea of what is Ajax, I guess this solution is better for you.

Solution 2:

To change part of your page from a new request, use Ajax. You can find a lot about it online.

That said, using ajax for basic navigation of a simple website is bad taste. Just do a normal navigation.