Question

我有页面项目/ 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可以展示一个例子吗？也创建链接应该是直播，如果点击它应该加载正确的页面。谢谢大家！

Answer 1

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

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

});

JQuery动态网站，页面链接

1 个答案: