2012-02-06 31 views
7

Tôi có thẻ neo khác nhau với href = # id và tôi cần phải che giấu chúng bằng một quy tắc css chung cho tất cả trong số họ,Làm thế nào để ẩn một thẻ neo bởi #ID href sử dụng css

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

tôi cố gắng sử dụng một cái gì đó như thế này:

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

Bất kỳ ý tưởng làm thế nào để làm điều đó?

Trả lời

14

Hãy thử sử dụng bộ chọn thuộc tính:

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

Hoặc thậm chí chỉ đơn giản là

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

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

+1

Nhưng nếu neo có 'display: none' thì nó không còn hoạt động nữa (có nghĩa là, nhấp vào liên kết đến neo này sẽ không, ví dụ: cuộn xuống). Và với 'khả năng hiển thị: ẩn ', neo vẫn sử dụng cùng một không gian. Bất kỳ giải pháp cho điều này? – roesslerj

+0

Tôi không hiểu nhận xét: tại sao bạn muốn người dùng có thể nhấp vào liên kết bị ẩn? – graphicdivine

+0

Bản thân liên kết không bị ẩn, chỉ liên kết mà nó đề cập đến. Vấn đề là (trong hệ thống tạo HTML) tôi không có quyền truy cập vào văn bản gốc mà tôi muốn cuộn đến và tôi không muốn thêm một số văn bản bổ sung chỉ để có thể đặt một neo. – roesslerj

0

Giả sử #wrap là một id của một phụ huynh, bạn có thể sử dụng:

/* 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; } 
2
#wrap a[href="#tab1"]{ 
display:none; 
} 
11

Tại sao không chỉ tạo một lớp CSS cho neo của bạn và ẩn chúng bằng cách sử dụng lớp đó?

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

Và trong CSS của bạn:

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

Tất cả các neo bạn muốn ẩn sẽ chỉ sử dụng "class = 'hiddenTab"

+0

Câu trả lời đúng :) .. – Hitesh

1

Nếu bạn muốn ẩn tất cả một thẻ có bộ href, bạn có thể làm điều này:

a[href] { display: none; } 
2

Hãy thử sử dụng a[href*="#"] {display: none;} này bộ chọn xác định số # trong thuộc tính href của một neo và nếu thấy nó áp dụng kiểu

Bạn có thể sử dụng nó theo cách khác chẳng hạn như header a[href*="#"] {display: none;} Vì vậy, bạn không làm hỏng tất cả các neo trên trang web!

Các vấn đề liên quan