HTML標簽作為錨鏈接

1. 什么是錨鏈接？

<a></a>標簽主要作為超鏈接和錨鏈接使用。超鏈接主要指不同html頁面之間的跳轉，而錨鏈接指的是同一頁面之間的跳轉。

 

錨鏈接的兩種效果：

1. 在當前頁面中跳轉.：通過元素的ID進行跳轉 <a href="#name"></a>
2. 網頁中的返回頂部效果：<a href="#"></a>

 

2. 小案例

2.1 案例描述

比如要實現點擊下圖中的 “×”隱藏這個區域的效果

點擊前：

點擊后：

 

2.2 實現方法

1.給 “×” 所在的<a>標簽設置錨鏈接：

<!-- 頂部廣告欄 給這個區域的 div 設置 id 屬性，值為 close -->
<div class="top_banner" id="close">
　　　<a href="#">
　　　　　<img src="uploads/top_header.jpg" alt="">
　　　</a>
　　　<!-- 給 × 所在的 a 標簽設置錨鏈接 -->
　　　<a href="#close">x</a>
</div>

　　

2.給 id 屬性值為 close 的 div 設置被錨鏈接選中時（隱藏）的樣式：

.top_banner:target {
    display: none;
}