Javascript HTML在切换页面时不刷新公共元素_Javascript_Html

Javascript HTML在切换页面时不刷新公共元素

javascript html

Javascript HTML在切换页面时不刷新公共元素,javascript,html,Javascript,Html,我想知道是否有可能在页面之间有公共元素，当您更改页面时，这些元素不会刷新更具体地说，我的意思是：我有一个页眉，这个页眉是几个页面共用的，并且包含指向页面本身的链接。只是，每当我点击页眉时，整个页面都会刷新，随之而来的通常是恼人的闪烁。我想知道是否有可能在页面之间固定标题，这样当我点击链接更改页面时，内容会刷新，但标题不会。（背景也是如此）我现在得到的是： <script type="text/javascript"> $(document).ready(function()

我想知道是否有可能在页面之间有公共元素，当您更改页面时，这些元素不会刷新

更具体地说，我的意思是：我有一个页眉，这个页眉是几个页面共用的，并且包含指向页面本身的链接。只是，每当我点击页眉时，整个页面都会刷新，随之而来的通常是恼人的闪烁。我想知道是否有可能在页面之间固定标题，这样当我点击链接更改页面时，内容会刷新，但标题不会。（背景也是如此）

我现在得到的是：

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


$（文档）.ready（函数（）{
$（“#header”）.load（“../header_footer/header.html”）；
});

和在正文中（所有页面共用）

仅仅用HTML或Javascript就可以做到这一点吗

谢谢

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


<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'

}

//]]>

#pg2，#pg3{显示：无；}
第1页第2页第3页
//

加载新页面时，不可能保留任何页面元素（或JS）。但是，您可以使用Ajax加载页面的某些部分，而不会影响页面的其他部分—您已经在这样做了。那么，除了使用Ajax加载公共头文件时看起来有点倒退之外，还有什么问题呢？（当然，您也可以老一套地使用iFrame。）仅通过ajax请求就可以做到这一点。有很多javascript框架可以帮助完成这项任务。看一看

<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'

}

//]]>