开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何将路径嵌入到锚点href的当前路径？

将路径嵌入到锚点href的当前路径可以通过以下步骤实现：

首先，获取当前页面的路径。可以使用JavaScript中的window.location.pathname来获取当前页面的路径。
接下来，获取锚点元素的href属性值。可以使用JavaScript中的document.querySelector方法选择对应的锚点元素，并使用getAttribute方法获取其href属性值。
将当前页面的路径与锚点的href属性值进行拼接。可以使用JavaScript中的字符串拼接操作符（+）将两个路径进行拼接。
最后，将拼接后的路径赋值给锚点的href属性。可以使用JavaScript中的setAttribute方法将拼接后的路径赋值给锚点的href属性。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>将路径嵌入到锚点的当前路径</title>
</head>
<body>
  <a id="myAnchor" href="#"></a>

  <script>
    // 获取当前页面的路径
    var currentPath = window.location.pathname;

    // 获取锚点元素的href属性值
    var anchor = document.querySelector("#myAnchor");
    var anchorHref = anchor.getAttribute("href");

    // 将当前页面的路径与锚点的href属性值进行拼接
    var embeddedPath = currentPath + anchorHref;

    // 将拼接后的路径赋值给锚点的href属性
    anchor.setAttribute("href", embeddedPath);
  </script>
</body>
</html>

在这个示例中，我们首先创建了一个空的锚点元素，并为其设置了一个id属性（"myAnchor"）。然后，使用JavaScript获取当前页面的路径，并获取锚点元素的href属性值。接着，将当前页面的路径与锚点的href属性值进行拼接，并将拼接后的路径赋值给锚点的href属性。这样，就将路径成功嵌入到了锚点的当前路径中。

请注意，这只是一个示例代码，实际应用中可能需要根据具体情况进行适当的修改和调整。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

6.超链接-HTML基础

（1）语法格式文本或图片 ① 说明 href表示想要跳转到的那个页面的路径，可以是相对路径，也可以是绝对路径。...1.何为锚点链接? 在HTML中，锚点链接其实是内部链接的一种，它的链接地址（href属性）指向的是当前页面的某个部分。...想要实现锚点链接，得满足 2 个条件：目标元素的id a标签的href属性指向该id （1）示例 ① 例1 锚点超链接 ...锚点超链接示例1.png

2.3K3 2

HTML基础入门

目录结构：一个站点中的目录与目录之间的关系 URL 就是负责到目录中将资源文件的地址描述出来资源文件：就是网页要用到的文件(如：图片，音频，视频，...> 3、锚点锚点能够在页面的任意位置处做记号，允许在任何情况下跳转到该记号位置处锚点的使用方式： 1、...定义锚点 1、通过 a 标记的 name 属性来定义锚点内容...2、通过任意标记的 id 属性来定义锚点 2、链接到锚点内容内容 2、表格 1、表格的介绍表格的本质是由一些"单元格

2.9K2 0

url、href和src区别

：代表目前所在的目录，相对路径。如：内容、 “..”：代表上一层的目录，相对路径。如：内容或 “D:/aaa/”：代表根目录，绝对路径。...href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。...src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置。当浏览器找到：在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。...三、总结 src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。 href是Hypertext Reference的缩写，表示超文本引用。

6.7K5 0

HTML常用文本标记，超级链接和路径描述

标记格式：文本内容链接网页示例： ? 运行结果： ? 链接html文件示例： ? 运行结果： ? 绝对路径示例： ?...运行结果，当鼠标移动到这个超链接的时候就会显示title的内容：文本 ? 锚点：锚点是网页制作中超级链接的一种，又叫命名锚记。...然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。...首先，创建命名锚记：然后创建到该命名锚记的链接：文本示例： ? 运行结果： ? ?...同样的可以跳转到另一个网页中的锚点，示例： ? 运行结果： ? ?

1.9K2 0

php学习之html–精彩回顾（七）

” cellspacing=”边框之间距离” align=”水平线” > 表单普通按钮：和js配合使用重置按钮：超链接：描述相对路径和绝对路径相对路径是相对与自己来说其他文件的位置。 .../inage/ph.jpg 绝对路径：远程：网址和ip 本地：files:///d:xxx/xxx/xx.html 锚点：在当前页面中跳转定义锚点跳转到锚点的超链接...：描述

9043 0

HTML中的超链接

www）　　domain - 定义因特网域名，比如 w3school.com.cn 　　:port - 定义主机上的端口号（http 的默认端口号是 80）　　path - 定义服务器上的路径...实际上在网页开发中，我们用到的就是来定义超链接的路径一、http 链接：百度二、本地链接： E-MAIL 最后重点说一下瞄点链接：一般是点击之后跳到网页的一个地方。...比如淘宝网站页面上的《返回到顶部》这个链接　　定义锚点：… 　　链接点：… 当然，我们还可以到别的页面：定义瞄点：… 链接锚点：…

4.1K5 0

寒假提升｜ Day2 HTML结构-body元素-额外知识补充

案例练习 2.4. img元素地址网络地址本地地址绝对路径相对路径我们应该如何告诉浏览器来显示一张图片呢?使用img元素。 HTML 元素将一份图像嵌入文档。...设置 img 的 src 时，需要给图片设置路径: 网络图片:一个URL地址(后续会专门讲URL); ✓ 网络图片的设置非常简单，给一个地址即可; 本地图片:本地电脑上的图片，后续会和html一起部署到服务...img元素 - 图片的格式 2.5. a元素(anchor) 两个属性: href target _self _blank _parent _top 本页面的锚点链接 a元素和img元素常见元素...✓ _self:默认值，在当前窗口打开URL; ✓ _blank:在一个新的窗口中打开URL; ✓ 其他不常用, 后面iframe可以讲一下; a元素 - 锚点链接锚点链接可以实现:跳转到网页中的具体位置...锚点链接有两个重要步骤: 在要跳到的元素上定义一个id属性; 定义a元素，并且a元素的href指向对应的id; a元素 - 图片链接在很多网站我们会发现图片也是可以点击进行跳转的 img

6482 0

1.2.HTML的核心标签

DOCTYPE html> 超链接和锚点技术返回同一页面建立锚点超链接和锚点技术 <!...–href路径的指定：相对路径， –> 老鼠爱大米查看具体信息这是具体的内容跨页面建立锚点 <!...–href路径的指定：相对路径， –> 老鼠爱大米老鼠爱大米查看具体信息点击发送电子邮件这是具体的内容 6.扩展的知识点

6701 0

HTML超链接标签学习

---- 锚点学习: 锚点学习 ---- 超链接标签学习: a标签: href:要跳转的网页资源路径本地资源:相对路径网络资源:网络资源(网页)的URL target:指明要跳转的网页资源的显示位置...锚点学习: 作用:在一张网页中进行资源跳转使用: 先使用超链接标签在指定的网页位置增加锚点.格式为: 使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的...,格式: 访问方式超链接标签学习锚点学习: 锚点学习

4K0 0

HTML笔记

） URL：统一资源定位符(Uniform Resource Locator) 路径的表现形式： 1.绝对路径：从文件所在的最高级目录开始查找所经过的路径 2.相对路径从当前文件位置出开始查找所经过的路径..._blank：在新标签页中打开新网页超链接的其他用法： 1.资源下载让链接的href等于.rar或者.zip即可点我下载 2.电子邮件链接联系我们 3.锚点就是网页中的一个记号，通过超链接可以迅速到达记号所在的位置....实现步骤：第一步：定义锚点方式一：使用任意标签的id属性定义锚点化妆品区域方式二：使用a标签的name属性，定义锚点化妆品区域... 第二步：链接到锚点化妆品 4、返回顶部返回顶部块级元素和行内元素块级元素在网页中独占一行，可以设置宽高比如<

2.3K3 0

【HTML】HTML 标签总结 ★★★ ( 标签类型 | 排版标签 | 文本格式化标签 | 标签属性 | 图像标签 | 链接标签 | 注释标签 | 锚点定位 | 预格式化文本标签 | 特殊符号 )

; 标题锚点1 标题锚点2 标题锚点3 标题锚点4 创建锚点链接 : 跳转到标题锚点1 跳转到标题锚点2 跳转到标题锚点3 跳转到标题锚点4 代码示例 : 跳转到标题锚点1 跳转到标题锚点2 跳转到...标题锚点3 跳转到标题锚点4 标题锚点1</h1

6.9K3 0

html锚点id属性和name属性

最近对模板更新时用到了这一点，举例说一下 // a.html 点击跳转到第一个锚点点击跳转到第二个锚点 // a.html...第一个锚点 // b.html 第二个锚点如上所示，实现描点效果，需具备两个要素：需要有一个锚点，这个锚点就是我们要跳转到的位置...一般情况下，我们会在目标节点上添加id属性或者name属性，这个id或者name属性的值就是我们寻找锚点的依据，推荐使用id属性来标记锚点（因为id能够在各种标签上使用，name属性标记锚点时只能用在a...a标签一般用作定义超链接，用作超链接时它的href属性的值是另一个页面的URL。a标签用作锚点时，href的值是锚点的id值或者name值。...同一页面内的锚点跳转时，给href赋值# + 锚点id的值或者# + 锚点name的值，需要跳转其他页面的锚点位置时，需要在#前面加上跳转的路径，例如：href="b.html#two"

1421 0

html锚点id属性和name属性

最近对模板更新时用到了这一点，举例说一下复制代码 // a.html 点击跳转到第一个锚点点击跳转到第二个锚点...需要有一个锚点，这个锚点就是我们要跳转到的位置。...一般情况下，我们会在目标节点上添加id属性或者name属性，这个id或者name属性的值就是我们寻找锚点的依据，推荐使用id属性来标记锚点（因为id能够在各种标签上使用，name属性标记锚点时只能用在a...a标签一般用作定义超链接，用作超链接时它的href属性的值是另一个页面的URL。a标签用作锚点时，href的值是锚点的id值或者name值。...同一页面内的锚点跳转时，给href赋值# + 锚点id的值或者# + 锚点name的值，需要跳转其他页面的锚点位置时，需要在#前面加上跳转的路径，例如：href="b.html#two"

3346 0

Vue的一些命名规则与SPA实现思路

4.3 append 设置 append 属性后，则在当前 (相对) 路径前添加基路径。...例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b 4.4 有时候想要渲染成某种标签，例如。...SPA实现思路和技术点 1、 ajax 2、锚点的使用（window.location.hash #）（这个也挺重要的） 3 、hashchange 事件 window.addEventListener...("hashchange",function () {}) 4 、监听锚点值变化的事件，根据不同的锚点值，请求相应的数据 5 、原本用作页面内部进行跳转，定位并展示相应的内容 3....例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b <base herf="${pageContext.request.contextPath

1.9K1 0

HTML5新增相关标签的和属性

将该文件保存到工作区的根目录，通过 1 引入；如果图标无法加载显示到页面中，可能是因为网页加载图标过慢，...其中menuitem标签在web标准中已经删除MDN H5超链接 h5中允许在链接内包含任意对象，如段落、列表、整篇文章和区块，但是不允许出现音频、视频、表单元素、iframe等交互式内容关于锚点...H5中，a标签如果没有设置href时，只是链接的占位符，而不再是一个锚点, H4中没有设置href可以当做锚点使用创建用于链接的锚点的一般方法——任何定义了ID值的元素都可以作为锚点标记，给标签的...ID锚点命名时不要含有空格，同时不要置于绝对定位元素内，为a标签设置href属性，属性值设为“#+锚点名称”，如“#p4”，如果链接到不同页面，则设置如“demo.html#p4”可以使用相对路径也可以使用绝对路径...，但是锚点名称是区分大小写的有download和没有的比较下载图片浏览图片

2K1 0

学习分享——location.hash的用法「建议收藏」

URL所对应的网页文件在服务器上的虚拟路径；如果页面中含有锚点连接，可以使用hash标志指定页面中的锚点标志，该标志以“#”开头；搜索条件是指URL中所含有的查询条件，该查询条件以“?”...1．hash属性【功能说明】设置或获取URL中的锚点名称，如果Web页面中使用的锚点连接，通过设置location对象的hash属性可以方便的跳转到页面中的不同部分。...>……… ……… 当点击home链接时页面会自动跳转到name=”t1″的位置，同理点击contact,about时页面会定位到name...对于Ajax页面来说的话，一般用一个页面来处理所有的事务，也就是说，如果你浏览到一个Ajax页面里边有意思的内容，想将它收藏起来，可是地址只有一个呀，下次你打开这个地址，还是得像以往一样不断地去点击网页...其实一点也不神秘。如下例中，通过hash调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。

7852 0

html图像

(二)、相对路径和绝对路径相对路径，指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。绝对路径，指的是文件的完整路径。...超链接根据链接对象的不同分为：（1）外部链接（2）内部链接： ①内部页面链接； ②锚点链接；举例：锚点链接 ... 推荐音乐推荐电影...余光中-乡愁鲁迅-阿Q正传锚点链接

6251 0

前端零基础入门：页面结构层HTML

.> img属性：属性，值，描述 src，url，显示图像的Url alt，文字，图像替代文本 height，数值和百分比，图像的高 width，数值和百分比，图像的宽 HTML路径：相对路径...绝对路径超链接标签语法：内容 href:链接地址，可以是内部链接或外部链接超链接（空链接—target-title属性）超链接标签属性，描述...目录1 目录2 内容 xxxx 内容 xxxx 在不同页面如何定义锚点定义锚（不同页面）：网页1：...... 网页2：... html基本结构：语法：例如：...

1.2K1 0

深入解析HTML的标签

Markdown文件支持HTML标签，今天在编辑Markdown文档时，我希望嵌入一个带有图片的链接，因此需要使用HTML的标签。...html-a.jpg 标签的基本结构在HTML中，标签用于创建超链接，其基本结构如下：链接文本 href属性：指定链接的目标地址。...可以是一个绝对URL（以 http:// 或 https:// 开头）、相对URL（相对于当前页面的路径）或者一个锚点（页面内跳转）。链接文本：用户点击的可见文本内容。...以下是一些常见用法: 链接到其他网页：访问示例网站链接到电子邮件地址：发送邮件链接到电话号码：拨打电话链接到锚点（页面内跳转）跳到第一节

1301 0

CSS的超链接样式设计

而根据路径的不同，超链接可以分为以下三类：内部链接：内部链接所链接的目标一般位于同一个网站中，对于内部链接来说，可以使用相对路径和绝对路径。...所谓的相对路径就是URL中没有指定超链接的协议和互联网的位置，仅指定相对位置关系，例如上图中的menu.hrml和login.html在同一目录下，使用即可使用。...锚点链接：锚点链接是一个特殊的链接方式，实际上它是在内部链接或外部链接的基础上增加锚点标记后缀。...例如http://www.mysite.cn/web2_nav/index.html#anchor 表示跳转到index页面的标记为anchor的锚点处。...="#" class="a1">首页微博知乎<

1.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭