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作为其属性来使用,可以适应更多的页面布局元素。而这是很多书中没有提到的。

  • 相关阅读:
    innerHTML与innerText区别
    HTML5中的数据集dataset和自定义属性data-*
    HTTP协议
    Javascript 中的 && 和 || 使用小结
    JavaScript 实现回文解码
    sublime中用less实现css预编译
    jQuery事件绑定的四种方法
    前端学习过程中需要看的书籍
    Echarts学习宝典
    Vue插槽
  • 原文地址:https://www.cnblogs.com/fre2technic/p/3137129.html
Copyright © 2011-2022 走看看