知乎首页界面 推荐关注热榜切换

[小枝_3]

最近在写一个Asp.Net mvc论坛的毕业设计，想实现首页内容的动态刷新,考虑到上面导航栏实现效果是通过a标签实现每一个选项一个页面，但是观察到知乎首页的热搜、关注、推荐 三个板块的切换并没有 页面的重新加载，但是路径进行了切换，想问一下这种效果如何实现，或者有什么好的思路

[手在键盘敲很轻]

ajax了解一下

[小枝_3]

局部刷新吗？

[三楼の郎]

引用 2 楼 小枝_3 的回复:

局部刷新吗？

最简单的直接把三块内容一起载进来，通过CSS控制显示谁不显示谁就ok了

[小枝_3]

引用 3 楼 三楼一郎 的回复:

[quote=引用 2 楼 小枝_3 的回复:]局部刷新吗？

最简单的直接把三块内容一起载进来，通过CSS控制显示谁不显示谁就ok了[/quote] 但是这个知乎的三个切换，页面没有刷新，但是路径发生了改变，内容也发生了改变，想了解一下大概思路

[不胖到130不改名字]

<nav class="TopstoryTabs Topstory-tabs"><a aria-controls="Topstory-recommend" class="TopstoryTabs-link Topstory-tabsLink" data-za-detail-view-id="9122" data-za-extra="{"button":{"text":"推荐"}}" href="/">推荐</a><a aria-controls="Topstory-follow" class="TopstoryTabs-link Topstory-tabsLink" data-za-detail-view-id="9122" data-za-extra="{"button":{"text":"关注"}}" href="/follow">关注</a><a aria-controls="Topstory-hot" class="TopstoryTabs-link Topstory-tabsLink is-active" data-za-detail-view-id="9122" data-za-extra="{"button":{"text":"热榜"}}" href="/hot">热榜</a></nav>

是挺奇怪，是通过a标签的href切换的， 页面url也变更了，但只有中间容器内容变更了，其他模块都没有刷新

[楠小南]

单页面程序，你可以参考一下 ASP.NET Core Blazor 框架，他就是一个单页面

[极客诗人]

1.js异步加载 2.弄成多个区域，全部加载后，控制显示区域和内容

[hztltgg]

是有点奇怪，一般的前端框架，用a链接的#来区分加载的内容，#是对自己页面的链接，不会刷新页面。 这个直接用网址来做，一般是前端框架对href内容进行拦截处理的，具体不知道他们用什么框架。

[晨易夕]

你也可以试一下单页应用啊，都是一个页面，路径变了是框架的路由管理起作用。

[ziqi0716]

其实前端项目有很多现成的方案，建议前后端分离下先。 前端可以分成多个组件，整体框架一个TabTable，Header内容来区分大类。 每个TabItem内容都是一个List，List的Item样式再定义一下，如标题，内容简介，缩略图等部分。 数据获取及刷新可以使用ajax或者二次封装的库来实现（axios等），获取到数据刷新组件内容，通常使用mvvm框架的绑定机制，数据刷新，UI自动刷新。 这个思路可以用vue，angular等来实现，还可以借助下Element-UI等库。