HTML锚点参考II

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/eric-qin/p/4431633.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用HTML锚点实现页面内跳转，并通过示例展示了如何利用JavaScript控制内容的展开与收起，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

锚点使用：<a href="#a">会直接找到id为a的元素的位置，不需要其他设置。如此简单！

<a href="#a">
    <li>
        <p>七月流火，八月未央</p>
        <span>作者-胡依衡</span>
    </li>
</a>
<a href="#b">
    <li>
        <p>关于等候时间</p>
        <span>作者-吴雨晨</span>
    </li>
</a>
<a href="#c">
    <li>
        <p>博学之 审问之 慎思之 明辨之 笃行之</p>
        <span>作者-陈倩雯</span>
    </li>
</a>

<ul>
    <li id="a">
        <h2>七月流火，八月未央</h2>
        <div>作者-胡依衡</div> 
        <div class="font2" style="display: none">
            <p>犹记得报到那天，......</p>
        </div>
        <a href="javascript:;" class="open-a">阅读全文</a>
    </li>
    <li id="b">
        <h2>关于等候时间</h2>
        <div>作者-吴雨晨</div>
        <div class="font1"> 
            <p>我所在的凉城路支行营业厅有四个综合柜......</p>
        </div>
        <a href="javascript:;" class="open-a">阅读全文</a>
    </li>

    <li id="c">
        <h2>博学之 审问之 慎思之 明辨之 笃行之</h2>
        <div>作者-陈倩雯</div>
        <div class="font1">
            <p>博学之.....</p> 
        </div> 
        <a href="javascript:;" class="open-a">阅读全文</a>
    </li>
</ul>