V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
LuyeeTom
V2EX  ›  问与答

CSS 隐藏元素后,如何在指定页面又可出现?

  •  
  •   LuyeeTom · 2021-08-27 20:46:06 +08:00 · 1073 次点击
    这是一个创建于 1213 天前的主题,其中的信息可能已经有所发展或是发生改变。
    隐藏了某一模块,但在搜索结果页 123.com/?s=xx 又需要它出现
    .test {
    display:none;
    }

    该怎么办?能加条件吗?
    4 条回复    2021-08-28 09:48:14 +08:00
    autoxbc
        1
    autoxbc  
       2021-08-27 21:17:56 +08:00   ❤️ 1
    非标准方法有 @document,不过只能用在 Firefox 上
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document

    我的处理方法是在 js 里加这么一句
    document.body.setAttribute('location', location );

    然后就可以在 css 里进行地址查询
    body:not([location*="123.com/?s="]) .test { display: none; }
    P233
        2
    P233  
       2021-08-27 21:18:56 +08:00   ❤️ 1
    借助 js 的话,方法还是很多的

    纯 CSS 的话,就不那么优雅了:

    1. 给 body 一个 id,例如 #body
    2. url 加 hash, 如 123.com/?s=xxx#body
    3. 更新 CSS 为 `:target .test { display: block }`
    wdssmq
        3
    wdssmq  
       2021-08-27 21:24:23 +08:00
    .hidden {
    display: none;
    }

    <div class="test hidden">aa</div>

    在搜索而额外加一段

    <scripot>
    $("div.test").removeClass("hidden");
    </scripot>

    需要 JQ,虽然也有原生 JS 写法;

    也可以通过判断决定要不要加 hidden 类,然而要看具体的前、后端渲染。。
    orangejx
        4
    orangejx  
       2021-08-28 09:48:14 +08:00 via iPhone
    在搜索页加一段 css display:block
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4884 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 09:51 · PVG 17:51 · LAX 01:51 · JFK 04:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.