1. 什么是锚链接?
<a></a>标签主要作为超链接和锚链接使用。超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转。
锚链接的两种效果:
- 在当前页面中跳转.:通过元素的ID进行跳转 <a href="#name"></a>
- 网页中的返回顶部效果:<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; }