如何根据 URL 动态显示或隐藏网页表单

轻明君_1367

轻明君_1367

2026-06-15

467人浏览

原创

如何根据 URL 动态显示或隐藏网页表单

本文介绍如何使用纯 JavaScript 检测当前页面 URL 路径是否包含特定字符串(如 /home),并据此动态控制表单容器的显示与隐藏,确保表单仅在匹配路径下可见。

本文介绍如何使用纯 javascript 检测当前页面 url 路径是否包含特定字符串(如 `/home`),并据此动态控制表单容器的显示与隐藏,确保表单仅在匹配路径下可见。

在实际开发中,常需根据用户访问的页面路径(URL)动态控制某些 UI 元素的可见性——例如,仅在 /home 或其子路径(如 /home/about)下显示报名表单,而在其他页面(如 /contact、/products)中完全隐藏。这不仅能提升用户体验,还能避免不必要的资源加载和潜在的交互冲突。

✅ 正确实现的关键点

你最初的尝试失败,主要原因在于执行时机与 DOM 加载顺序不匹配:

蜜蜂剪辑
蜜蜂剪辑

蜜蜂剪辑是一款AI视频创作工具,AI 去水印工具,支持图片及 30+ 主流短视频平台。

下载
  • 表单容器
    是在

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    热门推荐
    /
    最新课程
    phpStudy极速入门视频教程
    phpStudy极速入门视频教程

    共6课时 | 54.6万人学习

    独孤九贱(4)_PHP视频教程
    独孤九贱(4)_PHP视频教程

    共89课时 | 133.4万人学习