正文内容必须更新而无需更改页眉和页脚，也不能刷新页面

Question

我有一个带有“主页”和“关于我们”按钮的标题菜单。 默认情况下加载主页。 在主页上，我在主页上有一个链接。 当我单击主页上的链接或“关于我们”按钮时，正文内容必须在主页中进行更改，但页面不应刷新。 必须显示“关于我们”的相关数据。 页眉页脚页对于所有页面都是通用的，只需要更新正文内容而无需刷新页面。 我不想在这里使用任何jquery或没有服务器调用。

Answer 1

您可以为此使用ajax：

$("#link1").click(function(){
    $.ajax({
        url: url, //get the url of the link
        type: post,
        success: function(result){
            // Arrange your data according to your html webpage 
            // If the result is already aligned as per your structure then directly put it into the div you want to replace the content
            $("#container").empty();
            $container.append(arrangedHtmlStructure);
        }
    })

})

Answer 2

 function show (pagenum) { $('.page').css('display','none'); if (pagenum == 0 ) { $('.home').css('display','block'); } if (pagenum == 1 ) { $('.about').css('display','block'); } }

 .header,.footer { background: black; } .menu a{ color: white; } .about { display : none } .footer { position : fixed; bottom:0; width:100%; color:white; text-align:center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div class="header"> <ul class="menu"> <li> <a href="#" onclick="show(0)" >Home</a> <a href="#" onclick="show(1)" >About Us</a> </li> </ul> </div> <div class="home page" >This is Home</div> <div class="about page">This is About</div> <div class="footer">This is footer</div> </body> </html>

Answer 3

您正在寻找的是Router 。 有关路由和导航的详细信息，请参阅Angular 2官方文档。

我设置了一个Plunker ，为您提供了Angular 2中路由的基本示例。

路由发生在一个名为app.routing.ts的新文件中，有关重要部分，请参见下文：

import { HomeComponent }  from './home.component';
import { AboutUsComponent }    from './aboutus.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'aboutus', component: AboutUsComponent }
];

首先，导入要导航到的组件（如页面），然后设置要导航到的路径（如地址栏中的网址）。 path: 'aboutus', component: AboutUsComponent导航到foo.com/aboutus时将加载AboutUsComponent 。

在HTML中，主要更改是您没有使用<a href="/aboutus"> ，而是使用了<a routerLink="/aboutus"</a> ，因此Angular知道要导航到的位置（请参见下面的代码）。

<nav>
  <a routerLink="">Home</a>
  <a routerLink="/aboutus">About us</a>
</nav>

试一下代码并查看文档，以摆脱困境。

一侧注
请在以后的问题中，在代码中添加一个起点，以便您的问题可以轻松得到回答。 另请参阅https://stackoverflow.com/help/mcve

正文内容必须更新而无需更改页眉和页脚，也不能刷新页面

问题描述

3 个解决方案

解决方案1
0 2016-09-23 04:21:24

解决方案2
0 2016-09-23 04:24:12

解决方案3
0 已采纳 2016-09-23 08:34:43

正文内容必须更新而无需更改页眉和页脚，也不能刷新页面

问题描述

3 个解决方案

解决方案1 0 2016-09-23 04:21:24

解决方案2 0 2016-09-23 04:24:12

解决方案3 0 已采纳 2016-09-23 08:34:43

解决方案1
0 2016-09-23 04:21:24

解决方案2
0 2016-09-23 04:24:12

解决方案3
0 已采纳 2016-09-23 08:34:43