锚点使用a标签不改变url

最新推荐文章于 2024-01-17 17:36:26 发布

小小951

最新推荐文章于 2024-01-17 17:36:26 发布

阅读量1.1k

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_62042254/article/details/123661742

版权

在Vue应用中，为了避免a标签点击导致URL变化，可以移除href属性并添加点击事件。通过JavaScript的document.querySelector方法实现锚点定位，同时保持页面URL不变。结合CSS样式，可以达到理想的效果。

摘要由CSDN通过智能技术生成

<div class="nav">
    <a :class="{active: active===0}" @click="getScrollIndex(0,'#first')">测试1</a>
    <a :class="{active: active===1}" @click="getScrollIndex(1,'#second')">测试2</a>
    <a :class="{active: active===2}" @click="getScrollIndex(2,'#third')">测试3</a>
    <a :class="{active: active===3}" @click="getScrollIndex(3,'#fourth')">测试4</a>
</div>
<div class="list">
    <div id="first" class="listLi">
        <div>测试1</div>
    </div>
    <div id="first" class="listLi">
        <div>测试2</div>
    </div>
    <div id="first" class="listLi">
        <div>测试3</div>