vue中a标签⾥href带参数，实现当前页⾯带锚点vue 中a标签⾥href带参数，实现当前页⾯带锚点
<!-- ⾯包屑区 -->
<div class="bread">
<div class="left-pannel">
<!-- 锚点 -->
<div class="ab"v-for="(item,index) in detailList.anchors":key="index">
<a :href="'report?id='+detailList.id+'#'+item" >{{item}}</a>
</div>
</div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">⾸页</el-breadcrumb-item>
<el-breadcrumb-item>⼀级标题</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/regulation' }">⼆级标题</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
注意写法，参数不⽤单引号和花括号
:href="‘report?id=’+detailList.id+’#’+item"
.bread{
height: 40px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
position: relative;
.left-pannel{
position: absolute;
left: -160px;
top: 214px;
width: 150px;
height: 100%;
.ab{
background: #fff;
margin-bottom: 2px;
height: 50px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color:rgba(153, 153, 153, 1);
padding: 0px 10px;
line-height: 20px;
height: 60px;
}
}
}
⽰例
html中的锚点设置
⼀、页⾯内跳转的锚点设置
页⾯内的跳转需要两步：
⽅法⼀：
①：设置⼀个锚点链接去喵星⼈；（注意：href属性的属性值最前⾯要加#）
②：在页⾯中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写⼀个name属性，属性值要与①中的href的属性值⼀样，不加#）标签中按需填写必要的⽂字，⼀般不写内容
⽅法⼆：
①：同⽅法⼀的①
②：设置锚点的位置 <h3 id="miao">喵星⼈基地</h3>；在要跳转到的位置的标签中添加⼀个id属性，属性值与①中href的属性值⼀样，不加#
⽅法⼆不⽤单独添加⼀个a标签来专门设置锚点 ，只在需要的位置的标签中添加⼀个id即可。
⽰例
<html xmlns="/1999/xhtml"lang="en">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>萌宠集结号</title>
</head>
<body>
<ul>
<li><a href="#miao">去喵星⼈</a></li>
<li><a href="#wang">去汪星⼈</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a><!--设置锚点⽅法1-->
<h3 id="miao">喵星⼈基地</h3><!--设置锚点⽅法2-->
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>href标签怎么用
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
</body>
</html>
⼆、跨页⾯跳转
①：设置锚点链接，在href中的路径后⾯追加：#+锚点名，即可
如：<a href="萌宠集结号.html#miao">跳转到萌宠集结号页⾯</a>
②：要跳转到的页⾯中要设置锚点，⽅法见⼀种的步骤②，两个⽅法任选其⼀。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。