JQuery动态网站，页面链接

JQuery dynamic web site , page links

本文关键字：链接 动态 网站 JQuery      更新时间：2023-09-26

我有页面项目/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>

所有的工作都很好，但在浏览器地址中，我会得到当前页面的地址（例如index.html/pages/page1.html或ingex.html/page1.html或其他），而不仅仅是index.html如果这在PHP中是可行的，可以举一个例子吗？还创建了链接应该是活的，文点击它应该加载右边的页面。谢谢大家！

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

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