上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

切换部分网页的原理是什么

[复制链接]

该用户从未签到

3

主题

11

回帖

21

积分

助理工程师

积分
21
发表于 2023-9-17 19:57:27 | 显示全部楼层 | 阅读模式
悬赏2油猫币已解决

本帖最后由 square_http 于 2023-9-17 20:02 编辑

在写头歌的页面优化脚本,但是这种只切换部分网页的原理搞不懂,有没有哥哥能解释下,或者说一下这种技术的名字.
image.png
image.png
像这样,点击左侧栏,右边的内容就会切换

最佳答案

查看完整内容

[md]本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现: 一种是使用**路由跳转**的, 也就是点击之后页面的URL会有变化但是没有刷新页面, 一般用于比较大的模块切换, 比如你那个网站的头部导航栏. (下面将这种方法称为**路由跳转**) 一种是直接使用Js控制的, 不操作URL, 一般用于比较小模块的切换, 一般用于页面UI固定只要切换一部分内容. (下面将这种方法称为**标签跳转**) 这些一般都是借助一 ...
  • TA的每日心情
    难过
    2024-4-24 18:57
  • 签到天数: 13 天

    [LV.3]偶尔看看II

    19

    主题

    27

    回帖

    260

    积分

    荣誉开发者

    积分
    260

    荣誉开发者油中2周年生态建设者喜迎中秋

    发表于 2023-9-17 19:57:28 | 显示全部楼层

    本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现:

    一种是使用路由跳转的, 也就是点击之后页面的URL会有变化但是没有刷新页面, 一般用于比较大的模块切换, 比如你那个网站的头部导航栏. (下面将这种方法称为路由跳转)

    一种是直接使用Js控制的, 不操作URL, 一般用于比较小模块的切换, 一般用于页面UI固定只要切换一部分内容. (下面将这种方法称为标签跳转)

    这些一般都是借助一些框架或者库去做的, 比如路由跳转 Vue / React 这些框架都有对应的实现; 标签跳转有 ElementUI / Ant Design 这些库提供组件来实现.


    具体做法就是提供一个对应的容器, 比如:

    [教学课堂] 对应一个 教学课堂的 div 容器, 里面包含了 [教学课堂内容]
    [实践项目] 对应一个 实践项目的 div 容器, 同样包含了 [实践项目内容]

    点击 [教学课堂] 时就将 [教学课堂内容] 显示出来, 其他的都隐藏掉; 同样的点击 [实践项目] 时就将 [实践项目内容] 显示出来, 其他的都隐藏掉.

    这个隐藏和显示可以使用任何方式进行, 比如:

    • 使用 html + js + css 控制, 比如定义一个 .hide {display: none;} 类, 将所有内容写在html中, 将隐藏的元素添加上 .hide 类, 显示的内容删除 .hide 类.
    • 使用纯 js 控制, 将 [教学课堂内容] 和 [实践项目内容] 都保存在一个 js 变量中, 需要显示的时候就将对应内容写入到页面中, 删除需要隐藏的元素.

    而上文所说的 路由跳转 和 标签跳转 , 只是控制这些内容该什么时候显示和显示什么内容, 具体的显示方式大致就是上面的内容.

    已有1人评分贡献 理由
    李恒道 + 1 ggnb!

    查看全部评分 总评分:贡献 +1 

    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    683

    主题

    5388

    回帖

    6325

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6325

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-9-17 22:43:50 | 显示全部楼层
    SPA页面
    由于浏览器支持可以本地替换路由而不重新加载HTML
    JS监听路由变化
    出现变化会计算当前应该渲染的内容
    然后根据渲染内容重新进行渲染
    Vue/React都是这个步骤

    这个页面就是React框架写的
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    683

    主题

    5388

    回帖

    6325

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6325

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-9-17 23:18:52 | 显示全部楼层
    Yiero 发表于 2023-9-17 22:45
    [md]本质上就是将页面数据保存, 然后当选择对应项目的时候显示对应项目, 具体有两种实现:

    一种是使用**路 ...

    哥哥写的好严谨
    爱了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    回帖

    2

    积分

    助理工程师

    积分
    2
    发表于 2023-9-19 14:40:30 | 显示全部楼层
    test一下一下
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表