最新消息:关注【已取消】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

HTML锚点页内跳转的方法学习记录

HTML5 太平洋学习网 0浏览 评论

要想在HTML页内跳转的话,必须要对html锚点,也就是要在需要跳转的目标页面部分做一个标记,通常情况下,只有在内容长度大于页面长度时,页内跳转才会生效,HTML页内跳转有两种方法实现,分别是id与name锚点。

方法一:在目标页面标签添加id="xxx",具体实施如下:

1:设置一个href锚点链接<a href="#way1">去方法一</a>。(注意:前面的"#"标志不能忘记)

2:在目标页面设置锚点,如<h3 id="way1">方法一的锚点</h3>,(注意:way1前面不需要"#"标志,不仅限于<h>标签)

方法二:在目标页面标签添加name="xxx",如下:

1:设置一个href锚点链接<a href="#way2">去方法二</a>。(注意:前面的"#"标志不能忘记)

2:在目标页面设置锚点,如<a name="way2">方法二的锚点</a>,(注意:way1前面不需要"#"标志,不仅限于<a>标签)

HTML页内跳转完整案例如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>html锚点方法</title>
</head>
<body>
    <ul>
        <li><a href="#way1">去方法一</a></li>
        <li><a href="#way2">去方法二</a></li>
        <li><a href="#qita">其它只是占位置</a></li>
    </ul>

    <h3 id="way1">方法一的锚点</h3>
    <p>方法一</p>
    <p>方法一</p>
    <p>方法一</p>
    <p>方法一</p>
    <p>方法一</p>
    <p>方法一</p>
    
    <a name="way2">方法二的锚点</a>
    <p>方法二</p>
    <p>方法二</p>
    <p>方法二</p>
    <p>方法二</p>
    <p>方法二</p>
    <p>方法二</p>

    <a name="qita">其它只是占位置</a>
    <p>占位置</p>
    <p>占位置</p>
    <p>占位置</p>
    <p>占位置</p>
    <p>占位置</p>
    <p>占位置</p>
</body>
</html>


来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/642.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论