使用php include语句更正innerHTML以更改DIV内容的语法

Question

I am working on a revamp of my companies website, a js vertical scrolling menu of buttons on the left are links to change the contents of the main div under the header. I have it set up with php include statements right now, which works, but every time it reloads the whole page, so the scrolling menu on the left resets to the top of the list, losing the visitors place.

You can see the prototype at http://www.nbtc.org/nv, click on 'Bicycling' or 'Carpool' to see it in action.

Instead of doing that I want to use js to change the contents of the div with innerHTML, I want one function where the link includes the variable, so the link would look like:

<a class="button" href="javascript:changecontent(bike)">Bicycling</a>

The following function would than run:

<script type="text/javascript">
function changecontent(var1)
{
document.getElementById('content').innerHTML="<?php include(" var1 .php"); ?>";
}
</script>

And the div with the id'content' would change to include bike.php. Clicking a different link would change the div to something else.

I am new to this, so please help me with the syntax of the script, I know I have to separate out the 'var1' in the function statement but I don't know how.

This seems like a straight solution, but if there is a better way I am all ears. The vertical scrolling menu already uses jquery, and I read about the 'load' function, maybe that would be better?

Thanks for your help! Brenden

Answer 1

$.load would definitely be good here.

$(function(){
    $(".menutable").on("click", ".button", function(event){
        event.preventDefault();
        $("#content1").load(event.target.href);
    }); 
});

Then change all of your links to contain their actual destination in the href value:

<a class="button" href="bike.php">Bicycling</a>

Demo: http://jsbin.com/uyasux/edit#javascript,html