首页 > 其他分享 >30.使用锚点链接导致url发生改变,一旦刷新页面就会导致找不到页面的情况?

30.使用锚点链接导致url发生改变,一旦刷新页面就会导致找不到页面的情况?

时间:2023-07-06 16:23:23浏览次数:49  
标签:index url 30 idName id toTopic 链接 页面

 

步骤一:将原来锚链接中href="#id1"去掉,增加点击事件@click="toTopic('#id'+index)"

<a v-for="(tag, index) in 30" :key="index" @click="toTopic('#t'+index)">
    <el-tag type="info" class="tagItem">{{ index + 1 }}</el-tag>
</a>

 

步骤二:利用scrollIntoView方法使对应的id进入可视区即可

toTopic(idName){
      document.querySelector(idName).scrollIntoView(true);
}

 

标签:index,url,30,idName,id,toTopic,链接,页面
From: https://www.cnblogs.com/chenJieLing/p/17532492.html

相关文章

  • 「NOIP 模拟赛 20230706」偷 WiFi
    summarization有一个长度为\(n\)的序列\(p\),将其中若干个数标记。对于序列中的每一个位置\(i\),其贡献为其左边与右边离它最近的被标记的数的数值的和。求出最大的贡献总和。(\(1\len\le2\times10^6\))solution首先显然,\(p_1,p_n\)一定要标记。然后考虑分别求相邻的标记数......
  • 初识html[230706]
    基础认知目标:认识网页组成、浏览器、web标准概念铺垫网页有哪些部分组成?文字图片视频音频超链接背后本质是什么?前端程序员、工程师的代码代码是通过什么软件转换成用户眼中的页面?通过浏览器“解析和渲染”常见:IE、Firefox、Chorme(辅助、自带调试功能多)、Saf......
  • 直播平台源码,默认页面几秒后自动跳转另一页面
    直播平台源码,默认页面几秒后自动跳转另一页面publicclassMainActivityextendsAppCompatActivity{   privatestaticfinallongDELAY=1000;  privateTimerTasktask;   @Override  protectedvoidonCreate(BundlesavedInstanceState){    ......
  • 【暑假题目】20030703 两数相加
    两数相加题目请使用C++计算出2^2023与3^2023的和题目分析首先通过题目,我们将所求的两个加数看为a,b,我们可以关注到两个点:1.首先要解决的是两个加数的求法,这里分别有两种求法:①通过for循环求得a,b两个加数。②通过指数函数pow函数得到a,b两个加数。在可以调用函数的情况下......
  • SSO2.0 20-20230705
                   ......
  • 微信小程序页面增加下拉刷新功能
     对应的json文件增加如下内容"enablePullDownRefresh":true,"onReachBottomDistance":50,"backgroundTextStyle":"dark","backgroundColor":"#6197FB" 2.对应的js增加函数onPullDownRefresh()和 onload是一个级别......
  • 新增接口&页面布局
    1.新增1.1.新增接口1.2.观察前端页面我们需要在前端弄一个增加的对话框给新增的按钮绑定openEditUI方法效果(感觉右边太窄了)其他:......
  • WordPress主题,当前页面使用了哪个template模板文件?
    对于页面与模板的对应情况一般都是能确定的,不过新朋友一时不熟悉可能还是需要花一点时间。其实,可以有一个小技巧,可以快速确定当前页面对应的模板文件。想要实现上面的效果,只需将下面代码加入主题的 functions.php 文件。functionzhuige_admin_bar_init(){//Ifnota......
  • kubesphere 重新部署deployment的页面实现
    找到工作负载的某一个,点击:部署那边点击重新创建即可 ......
  • AtCoder Beginner Contest 304
    A:1#include<cstdio>2#include<cstring>3#include<algorithm>4#include<iostream>5#include<string>6#include<vector>7#include<stack>8#include<bitset>9#include<cstdlib>10#include......