Question

我想知道在您更改网页时是否可以在不刷新的网页之间使用通用元素。

更具体地说，我的意思是：我有一个多个页面共有的标题，并包含指向页面本身的链接。只有当我点击标题时，整个页面才会刷新，并伴随着它带来的典型烦人的闪烁。我想知道是否可以在页面之间固定标题，这样当我点击链接更改页面时，内容会刷新，但标题不会。（背景也是如此）。

我现在拥有的是：

<script type="text/javascript"> 
  $(document).ready(function(){ 
    $("#header").load("../header_footer/header.html");
  });
</script>

和身体（所有页面共有）

<body>
  <div id="header"></div>
</body>

是否可以仅使用HTML或Javascript进行此操作？

谢谢！

Answer 1

不幸的是，使用传统的页面加载是不可能的。如果你不想闪烁，我建议你的网站是单页应用程序。基本上，您将在浏览器中加载一次页面，然后通过Ajax调用将所有后续页面动态加载到DOM中。

Answer 2

<style>
#pg2,#pg3{display:none;}
</style>

<body>

<div id="header"><button onclick="page(1)">Page 1</button><button onclick="page(2)">Page 2</button><button onclick="page(3)">Page 3</button></div>
<div id="pg1">

</div>
<div id="pg2">

</div>
<div id="pg3">

</div>
<script type="text/javascript">
//<![CDATA[
var pg =new Array;
pg[1] = document.getElementById('pg1')
pg[2] = document.getElementById('pg2')
pg[3] = document.getElementById('pg3')
function page(p){
  pg[1].style.display='none'
  pg[2].style.display='none'
  pg[3].style.display='none'
  pg[p].style.display='block'

}

//]]>

切换页面时，HTML不刷新常用元素

2 个答案: