0

I have page project/index.html

<html>
<head>
  <title>Index</title>
  <scripts...>
</head>

<body>
   Hello 
  <div id="content"></div>
  <button id="page1" value="page1"/>
  <button id="page2" value="page2"/>
  <button id="page3" value="page3"/>
<body>
</html>

JQuervy file project/js/main.js where :

$(document).ready(function(){
  $('button').click(function(){
  var Id = this.id;
  $("#content").load("pages/"+Id+".html #pageContent");
  });

});

And pages with content project/pages/ page1.html 

<html>
<head>
  <title>Page1</title>     
</head>

<body>      
  <div id="pageContent">
     Page 1
  </div>

<body>
</html>

----page2.html 

 ...
<body>      
  <div id="pageContent">
     Page 2
  </div>        
<body>
</html>

----page3.html

 ...
 <body>      
  <div id="pageContent">
       Page 3
  </div>         
<body>
</html>

All work just fine but in browser address I wold get address of curent page (ex. index.html/pages/page1.html or ingex.html/page1.html or else), no just index.html If this is posible with PHP can show an example? Also created link should be live, wen click on it should load the right page. Thank you all!

Andry
  • 171
  • 1
  • 1
  • 8
  • 4
    possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – Guns Apr 11 '14 at 08:45

1 Answers1

0

you just need to add one more line into your code

$(document).ready(function(){
  $('button').click(function(){
  var Id = this.id;
  $("#content").load("pages/"+Id+".html #pageContent");
   history.pushState('', '', "pages/"+Id+".html");   
});

});
Rizwan Abbas
  • 178
  • 2
  • 10