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

2021-08-27 20:46:06 +08:00
 LuyeeTom
隐藏了某一模块,但在搜索结果页 123.com/?s=xx 又需要它出现
.test {
display:none;
}

该怎么办?能加条件吗?
857 次点击
所在节点    问与答
4 条回复
autoxbc
2021-08-27 21:17:56 +08:00
非标准方法有 @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
2021-08-27 21:18:56 +08:00
借助 js 的话,方法还是很多的

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

1. 给 body 一个 id,例如 #body
2. url 加 hash, 如 123.com/?s=xxx#body
3. 更新 CSS 为 `:target .test { display: block }`
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
2021-08-28 09:48:14 +08:00
在搜索页加一段 css display:block

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/798413

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX