Question

I am making a simple website that has a main text window with just text on it. I would like to have buttons like Home, About, Contact etc. Now, I don’t want to make about.html, contact.html etc but I would rather just change the text without loading a new page? (so it feels more smooth).

So I made couple of paragraphs with text suited for each page (home, about etc.), now is there a way for what I’m asking you? To just change the paragraph on click of a button? Or is there any simple way of doing this without making the .html files for each page?

Thanks in advance.

Answer 1

I would agree with tvanfosson and recommend something like UI tabs or AJAX loading, but if you want to see a very rudimentary way you can do it with jQuery hide/show:

http://jsfiddle.net/ADDPH/7/

HTML

<div id="container">
    <ul id="nav">
        <li><a href="#" class="index">Index</a></li>
        <li><a href="#" class="contact">Contact</a></li>
        <li><a href="#" class="other">Other</a></li>
    </ul>
    <div id="content">
        <div class="index hide">This is the home page.</div>
        <div class="contact hide" style="display:none;">This is my contact info.</div>
        <div class="other hide" style="display:none;">This is other stuff.</div>
    </div>
</div>​

jQuery

$("#nav a").click( function() {
    $(".hide").hide(); // hide other divs, marked with hide class
    var c = $(this).attr('class').split(' ')[0]; //Get First Class
    $("#content ."+c).show(); //show anything inside content div with the class c (marked with a . to represent class)
});​