JQuery动态网站,页面链接

时间:2014-04-11 08:43:12

标签: javascript php jquery dynamic indexing

我有页面项目/ 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文件项目/ js / main.js其中:

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

}); 

包含内容项目/ 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>

所有工作都很好,但在浏览器地址我会得到curent页面的地址(例如index.html / pages / page1.html或ingex.html / page1.html或者其他),不仅仅是index.html如果这是用PHP可以展示一个例子吗?也创建链接应该是直播,如果点击它应该加载正确的页面。 谢谢大家!

1 个答案:

答案 0 :(得分:0)

您只需在代码中再添加一行

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

});