如何使用CSS隐藏一个带有href #id的锚点标签

Question

我有不同的带有 href=#ids 的锚点标签，并且我需要使用一般的 CSS 规则来隐藏它们。

Content xxxxxxxxx <a href="#tab1">Table 1</a>.Content xxxxxxxxxxxx <a href="#tab2">Table 2</a>

我尝试使用类似这样的东西：

#wrap a='#tab1'{
display:none;
}

有什么想法如何做到这一点吗？

- Jces

Answer 1

尝试使用属性选择器：

尝试使用属性选择器：

a[href='#tab1']{ display: none }

甚至可以只是简单地

[href='#tab1']{ display: none }

http://www.w3.org/TR/CSS2/selector.html

- graphicdivine

---

如果锚点的CSS属性是"display: none"，那么它将不再有效（也就是说，点击指向这个锚点的链接将不会滚动到相应位置）。而如果是"visibility: hidden"，锚点仍然占据相同的空间。有什么解决方法吗？ - roesslerj

我不理解这个评论：为什么你想让用户能够点击一个隐藏的链接？ - graphicdivine

链接本身并不隐藏，只有它所指向的锚点被隐藏了。问题在于（在生成HTML的系统中），我无法访问想要滚动到的原始文本，并且我不想添加一些额外的文本来放置锚点。 - roesslerj

啊，我明白了。你可以尝试使用：position:absolute; visibility: hidden。 - graphicdivine

Answer 2

为什么不只是创建一个CSS类来隐藏你的锚点，然后使用该类？

<a href="#tab1" class="hiddenTab">foo</a>

在你的CSS中：

a.hiddenTab {visibility:hidden; display:none;}

你想要隐藏的所有锚点都应该使用 "class='hiddenTab'"

- Tim

Answer 3

#wrap a[href="#tab1"]{
display:none;
}

- frazras

---

谢谢@frazras，你救了我的命。 - Pranay Kumbhalkar

Answer 4

如果您想隐藏所有具有设置href的a标签，可以这样做：

a[href] { display: none; }

- Ninja

Answer 5

尝试使用 a[href*="#"] {display: none;} 这个选择器可以在锚点的 href 属性中识别 #，如果找到了它就会应用这种样式。

你还可以以另一种方式使用它，例如 header a[href*="#"] {display: none;} 这样你就不会搞乱站点上的所有锚点！

- Junaid Anwar

Answer 6

假设#wrap是父元素的id，你可以使用以下代码：

/* Hide all anchor tags which are children of #wrap */
#wrap a{ display:none; }

/* Hide all anchor tags which are direct children of #wrap */
#wrap > a{ display:none; }

/* Hide a specific anchor tag (Probably won't work in IE6 though) */
a[href="#tab1"]{ display:none; }

- Sagar Patil