zoukankan      html  css  js  c++  java
  • (转)前端页面,页内锚定位分析

    原文链接:http://blog.sina.com.cn/s/blog_4714e4780100im2y.html

    很多文章中都有介绍如果大篇幅页面,慢慢去找很费劲,而页内直接定位到相应的内容处,则十分方便。但是很多文章只提到了 name属性,而且name属性还有很多限制与不完善。下面使用两个例子来举例说明:
    例1,

    <a href="#first">定位到first相关处</a>
    <a href="#second">定位到second相关处</a>
    <a href="#third">定位到second相关处</a>
    
    …………
    …………
    
    <a name="first">first相关内容……</a>
    <a name="second">second相关内容</a>
    <a name="third">third相关内容</a>
    
    …………

    如果你试过了,会发现上面代码可以正确跳转,下面看例2
    例2,

    <a href="#first">定位到first相关处</a>
    <a href="#second">定位到second相关处</a>
    <a href="#third">定位到second相关处</a>
    <a href="#forth">定位到second相关处</a>
    <a href="#five">定位到second相关处</a>
    
    …………
    …………
    
    <div name="first">first相关内容……</div>
    <span name="second">second相关内容</span>
    <div id="third">third相关内容</div>
    <span id="forth">second相关内容</span>
    <a id="five">second相关内容</a>
    
    …………

    你应该发现,只有以 id 作为其属性来定位的可以正确跳转。
    总结:所以说,name属性作为跳转锚定位局限于<a>元素,即形如 <a…name=""…></a>。而id作为其属性来使用,可以适应更多的页面布局元素。而这是很多书中没有提到的。

  • 相关阅读:
    【SpringCloud】工程分类概况
    【Spring Alibaba】Sentinel/Nacos/RocketMQ/Seata/
    【Eureka】服务架构类知识点
    求车速
    尼科彻斯定理
    Tom数
    弟弟的作业
    汽水瓶
    POJ-2533-Longest Ordered Subsequence(LIS模板)
    HDU-1331-Function Run Fun(动态规划3)
  • 原文地址:https://www.cnblogs.com/fre2technic/p/3137129.html
Copyright © 2011-2022 走看看