首页 > 解决方案 > 在保持相同标题的同时加载不同的页面

问题描述

我有一个问题,我正在使用 html、css 和 javascript 处理我的第一个投资组合。它只是一个简单的网站,带有导航菜单的标题和带有我的一些信息的正文,我想知道除了 iframe 是否还有其他方法每次单击链接时仅加载正文而不影响标题:

<header>
 <nav>
  Home, about me, etc
 </nav>
</header>
<body>
  this is my home page
</body>

标签: javascripthtmlcssiframe

解决方案


要真正使用 Angularjs 之类的库进行单页应用程序开发,确实可以做到这一点。如果你只需要一些非常简单的东西,你可以使用 jQuery 加载函数。例如:

<body>
<button id="home">Home</button>
<button id="about">About</button>
<button id="examples">Examples</button>
<div id="content">
  this is my home page
</div>
</body>

<script language="Javascript">
$("#home").click(function() {
    $( "#content" ).load( "home.html" ); //Load all retrieved content
});
$("#about").click(function() {
    //Only load content from a specific node
    $( "#content" ).load( "about.html #desc" );
});
$("#examples").click(function() {
    //More specific loading of node
    $( "#content" ).load( "examples.html #storeMain .container" );
});



</script>

推荐阅读