更改内容或包含文件而不刷新页面

Question

I've a menu and a content div. Content div is not displaying. When user clicks a menu item, content div shows and page smooth scrolls to top of the content div. Here is my code:

<div id="content">
    <div id="section1">
        <a id="bir" href="#icerikBaslik">1</a> <!-- This -->
        <a id="iki">2</a>
        <a id="uc">3</a>
        <a id="dort">4</a>
    </div>
</div>

<div id="icerikDiv">
        <h1 id="icerikBaslik">Deneme</h1>
        <p>Random content</p>
</div>

When user clicks "a id 1, (commented by This)" #icerikDiv shows and page scrolls. With this jQuery methods:

  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 1000);    
};

$(document).on('click', '#content a', function () {
    $('#icerikDiv').show();
    scrollToElement($(this).attr('href'));
});

So that's it for a menu item. Question is, I don't want to lose smooth scrolling and because of that I don't want page to be refreshed.

When user clicked another link, content of #icerikDiv must be changed. Page will still scroll to #icerikDiv but content will be different. This is what I want.

And if possible, I want to keep content datas in php files. Like "menu1.php", "menu2.php" etc.

When user clicks a link, can I include related php file into #icerikDiv without refreshing page?

I thought about:

• Give every link a specific method
• Inside them, show #menuXcontent and scroll to #menuXcontent
• Write down all content in same page, display:none;
• For example when clicked menu6 link, show #menu6content and scroll to it

But I didn't like this. I'm sure there is a better way.

Answer 1

You have two main options. One is like you describe, to include all of the content in a single page and show it as needed. This is a viable solution which is used quite often. The advantage is that once the page loads it is very responsive, as it does not need to get data from the server when you click a link. The disadvantage is that the initial page load will be much bigger. It would generally work well for sites where the individual sections were quite small.

The second option is to use ajax to get your content from the server without a page reload. Ajax can be used to get data or html from your server. If you have a php file which gives the output you want in html, you can use the .load convenience method:

$( "#icerikDiv" ).load( "menu1.php" );

This will get the data from menu1.php and put it in to #icerikDiv.

To avoid hardcoding the php file, we can use a data attribute so that the source is declared on each link - HTML:

<a id="bir" href="#icerikBaslik" data-content="menu-1.php">1</a>

Javascript:

$(document).ready(function() {
    $('#content a').click(function () {
        $( "#icerikDiv" ).load( $(this).data('content') );
        $('#icerikDiv').show();
        scrollToElement($(this).attr('href'));
    });
});

It might make more sense to put the div target on the data attribute and use href for the source php - but it will work either way.