首页 > Web开发 > 详细

HTML<a>标签作为锚链接

时间:2019-05-30 17:44:01      阅读:110      评论:0      收藏:0      [点我收藏+]

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" >
   </a>
   <!-- 给 × 所在的 a 标签设置锚链接 -->
   <a href="#close">x</a>
</div>

  

2.给 id 属性值为 close 的 div 设置被锚链接选中时(隐藏)的样式:

.top_banner:target {
    display: none;
}

  

HTML<a>标签作为锚链接

原文:https://www.cnblogs.com/belongs-to-qinghua/p/10950873.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!