如何在正文链接中将当前路径结尾追加到href

在HTML中，可以使用JavaScript来获取当前路径并将其追加到href属性中。以下是一种实现方法：

首先，在HTML文档中的<head>标签内添加一个<script>标签，用于编写JavaScript代码：

<head>
  <script>
    // 获取当前路径并将其追加到href
    function appendCurrentPath() {
      // 获取当前路径
      var currentPath = window.location.pathname;
      
      // 获取所有的链接元素
      var links = document.getElementsByTagName('a');
      
      // 遍历每个链接元素
      for (var i = 0; i < links.length; i++) {
        var link = links[i];
        
        // 获取原始的href属性值
        var originalHref = link.getAttribute('href');
        
        // 将当前路径追加到原始的href属性值后面
        var newHref = originalHref + currentPath;
        
        // 更新链接的href属性值
        link.setAttribute('href', newHref);
      }
    }
  </script>
</head>

在需要追加当前路径的链接元素中，调用上述JavaScript函数：

<body onload="appendCurrentPath()">
  <a href="/example">Example Link</a>
</body>

在上述示例中，通过调用appendCurrentPath()函数，可以将当前路径追加到所有具有href属性的链接元素中。例如，如果当前路径为/path/to/page.html，那么上述示例中的链接将被更新为/example/path/to/page.html。

请注意，这只是一种实现方法，具体的实现方式可能因应用场景和需求而有所不同。

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

有帮助

没帮助

相关·内容

深入解析HTML的标签

可以是一个绝对URL（以 http:// 或 https:// 开头）、相对URL（相对于当前页面的路径）或者一个锚点（页面内跳转）。链接文本：用户点击的可见文本内容。...target属性指定链接如何在浏览器中打开。...示例：下载PDF文件 rel属性指定当前文档与链接目标之间的关系。...示例：链接文本事件属性（如onclick）允许在特定事件发生时执行JavaScript代码...每日闲谈在文章的结尾，我引入了一个名为“每日闲谈”的模块。

1621 0

PbootCMS开发手册

：Y代表完整年份，y代表简化年份，m代表月份，d代表日，H代表小时，i代表分，s代表秒如完整时间：style='Y-m-d H:i:s'，更多请参考PHP时间格式化语法参考链接：http://php.net...:content drophtml\=1} 使用说明：一般在首页等特殊位置需要调取正文一段纯文本时使用，这时一般会配合下面的内容截取标签一起使用 4、内容截取标签长度截取使用len=* 或 lencn...='fa fa-home' 8、当前网址 {pboot:httpurl} 使用说明：自适应获取当前访问网址，主要用于需要使用网站路径前缀的情况，如输出：https://www.pbootcms.com...如果你已经开启伪静态，那么地址中将可以不含有index.php。...nav:i] 序号，从1开始 [nav:pcode] 父栏目编码 [nav:scode] 当前栏目编码 [nav:name] 栏目名称 [nav:subname] 栏目副名称 [nav:link] 栏目链接

4682 0

初识HTML5和CSS3

3.7K1 1

针对CSS说一说｜技术点评

:focus，将样式添加到被选中的元素中 :hover，当光标悬浮在页面对象上方时，向页面对象添加样式 :link，将样式添加到未被访问过的链接中 :visited，将样式添加到被访问过的链接中 :first-child...3.百分比%，以当前文本的百分比定义的尺寸。...属性且属性值为用连字符分隔的字词列表，表示由val开始的E元素 E[attr^="val"]，选择具有attr属性且属性值为以val开头的字符串的E元素 E[attr$="val"]，选择具有attr属性且属性值为以val结尾的字符串的...表示匹配任意字符 CSS结构伪类选择符 E:root，选择匹配E所在文档的根元素 E:not(s)，选择匹配所有不匹配简单选择符s的E元素 E:empty，匹配没有任何子元素的元素E E:target，匹配当前链接地址指向的...font-variant: 设置文本是否大小写 font-weight: 设置文本的粗细 font-stretch：设置文本是否横向的拉伸变形 fontsize: 设置文本字体的大小 src: 设置自定义字体的相对路径或绝对路径

1.2K2 0

如何在WordPress中添加图片放大预览效果

这里分享一个如何在Wordpress中开启点击图片预览的功能。操作也非常的简单，只需要把下面的内容黏贴到对应的文件中即可。实际的效果预览1、在主题的header.php文件中添加如下代码。...添加到header表中之中2、在主题的footer.php文件中添加如下代码，可以放在标签结尾处。.../**图片灯箱自动给图片加链接**/add_filter('the_content', 'fancybox');function fancybox($content){ $pattern = array...href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)

3464 0

wordpress如何实现图片点击放大预览效果

这里分享一个如何在Wordpress中开启点击图片预览的功能。操作也非常的简单，只需要把下面的内容黏贴到对应的文件中即可。1、在主题的header.php文件中添加如下代码。...添加到header表中之中2、在主题的footer.php文件中添加如下代码，可以放在标签结尾处。.../**图片灯箱自动给图片加链接**/add_filter('the_content', 'fancybox');function fancybox($content){ $pattern = array...href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)>(.*?)

1011 0

React Router入门指南（包括Router Hooks）

如您所知，默认情况下，React不带路由。为了在我们的项目中启用它，我们需要添加一个名为react-router的库。...} /> ); } 然后，将其添加到我们要呈现内容的位置。路线组件具有多个属性。但是在这里，我们只需要路径和渲染。...使用链接切换页面要添加到我们项目的链接，我们将再次使用React Router。 App.js import React from "react"; import "....并且，我们将名称附加到相应的链接。这样，我们现在必须通过调整其路径以将名称接收为参数path =“ / about /：name”来更新About路线。...useHistory useHistory钩子使我们可以访问history对象，而无需从props中将其提取。

12K2 0

Spring认证中国教育管理中心-Spring Data REST框架教程二

如果不是，则响应正文为空，并且可以通过以下Location响应标头中包含的链接获取所创建资源的表示。...4.5.搜索资源搜索资源返回存储库公开的所有查询方法的链接。可以使用@RestResource方法声明来修改查询方法资源的路径和名称。...5.1.1.上一个和下一个链接每个分页响应使用 IANA 定义的链接关系prev和next. 但是，如果您当前位于结果的第一页，则不会prev呈现任何链接。对于结果的最后一页，不next呈现链接。...该next链接指向下一页，假设页面大小相同。底部是有关页面设置的额外数据，包括页面大小、总元素、总页数以及您当前查看的页码。...prev现在出现一个链接，为我们提供上一页的路径。当前编号现在是 1（表示第二页）。

1.8K1 0

《精通CSS：高级Web标准解决方案》知识点汇总

，就会出问题为了使注释更有意义，可以使用关键字来区分重要的注释，如使用 @todo 来表示某些东西需要在以后进行修改、修复或复查，用 @bugfix 来表示代码或特定浏览器遇到的问题，用 @workaround...odd) li:nth0child(even) 属性选择器 [attr^=abc]，匹配属性/键为 attr，值为 abc 开头的所有元素 [attr$=abc]，匹配属性/键为 attr，值为 abc 结尾的所有元素...{ color: red; } .box_2 p:nth-of-type(2) { color: red; } 追梦的蚂蚁... 我一直在寻找不停奔跑跨过山间和海的问号追梦的蚂蚁...="tel:18897778730">18897778730 10086 邮件本篇的内容到这里就全部结束了

8964 1

Django二级域名路由配置方案django-hosts

列表 BLOG正文：当前访问的ID：{{ blog_id }} ?...www.mydomain.cn/blog/ --> http://blog.mydomain.cn/ 现在如果直接访问 http://blog.mydomain.cn/ 是显示的项目主页，因为没有具体路径的...现在BLOG列表的链接就是http://blog.mydomain.cn/list/ BLOG列表返回BLOG列表 BLOG正文：当前访问的ID：{{ blog_id }} ?...urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 当DEBUG模式时，增加media的路径

1.5K2 0

WordPress 网站正文顶端或者末尾插入固定内容的方法

WordPress 网站正文顶端或者末尾插入固定内容的方法。...有时候需要WordPress每篇文章正文顶端或者末尾插入固定的内容，比如加个广告、版权声明之类的，你可以直接打开正文模板添加，不过还是利用WordPress函数模板functions.php添加代码比较方便...1、网上搜索相关代码，都是只能加到正文的末尾，如果你想加到顶端可以用下面代码，将代码添加到当前主题functions.php模板的最后，并修改相应的内容。....= "关注：主机教程网"; $str.=...由主机教程网 2bcd.com 发表于主机教程网转载请保留本文链接：https://2bcd.com/3537.html

4052 0

HTML是什么？

、asp、aspx、jsp等后缀结尾的网页有什么区别呢？...5.Window-target(显示窗口的设定) 说明：强制页面在当前窗口以独立页面显示。...link 标签的内容结构解释 href 值为外部资源地址这里是收藏夹图标地址 rel 定义当前文档与被链接文档之间的关系,这里是外部icon图标属性 type 规定被链接文档的 MIME 类,这里是值为...文件的地址,相当于link标签href链接外部css文件一样CSS引用 type规定被链接文档的 MIME 类,这里是值为text/javascript HTML if 条件注释：判断作用的注释以上通过...如没有对dldt dd标签初始CSS样式，默认dd列表内容会一定缩进。标签 p 常常我们在需要分段大换行时候，对内容前加内容后加即可实现文章换段落。

1.8K3 0

稳定易用的 Django 分页库，完善分页功能

作者：HelloGitHub-追梦人物[1] 文中所涉及的示例代码，已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的“阅读原文”即可获取在通过 Django Pagination...当前页码高亮显示。显示当前页码前后几个连续的页码。如果两个页码号间还有其它页码，中间显示省略号以提示用户。分页思路如果需要自己来实现分页效果，我们会怎么做呢？...当前页码的左边部分，比如这里的 3-4。当前页码，比如这里的 5。当前页码的右边部分，比如这里的 6-7。最后一页页码前面的省略号部分。...（两边均匀分布，因此要设置为偶数）， 'MARGIN_PAGES_DISPLAYED': 2, # 分页条开头和结尾显示的页数 'SHOW_FIRST_PAGE_WHEN_INVALID...分页模板预定义的路径为 pure_pagination/pagination.html，所以我们可以在项目模板根路径下建立一个一模一样的文件结构，这样 django 就会首先找到我们的模板，从而应用我们自定义的模板

9132 0

HTML点击按钮button跳转页面的几种实现方法

/routeEdit/index.html'" type="button" id="add">新增正文方法一：在button标签中加上onclick属性，赋值为Javascript...blog.sina.com.cn/mleavs"; } 方法三：a标签的超链接可以直接嵌套一个...结尾我是圆圆，如果我的文章对你的学习成长有所帮助，欢迎点赞支持，您的点赞支持是我进行创作和分享的动力！...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/203567.html原文链接：https://javaforall.cn

15.9K3 1

Linux笔记二

0:文件当前行的开头 $:文件当前行的末尾 G:文件的最后一行开头 1 + G到第一行 9 + G到第九行 = :9 dd:删除一行 3dd：删除3行 yy:复制一行 3yy:复制3行 p:粘贴 u:...恢复到最初状态 :1,s/hadoop/root/g 将第一行到追后一行的hadoop替换为root:1,s/hadoop/root/c 将第一行到追后一行的hadoop替换为root(有提示) 安装软件...chkconfig iptables off:永久关闭防火墙 hostname:查看主机名 hostname xxx:改变主机名为xxx vim /etc/sysconfig/network： pwd:查看当前路径...不保存退出 cp [源文件] [目标文件]:复制 -r 递归复制 cat [文件名称] ：查看文件内容（内如过多，显示内容可能不全） more [文件名称] ：查看文件内容，可完全显示。...查看文件的后多少行 mv 1 修改文件名称的功能： mv [源文件名称] [新文件名称] 2 移动文件位置: mv [源文件名称] [新文件位置+ 新文件名称] ln -s [源文件] [目标文件] （硬链接则不需要

1.8K2 0

React技巧之设置target=_blank

原文链接：https://bobbyhadz.com/blog/react-set-target-blank[1] 作者：Borislav Hadzhiev[2] 正文从这开始~ 设置target=_...blank 在React中将元素的target属性设置为_blank ，可以使用锚元素并设置rel属性。...比如说，" target="_blank" rel="noopener noreferrer"> 。...noreferrer'); }; return ( {/* ️ setting target to _blank on a link */} <a href...我们将以下3个参数传递给open()方法：名称描述 url 被加载的资源的url或者路径 target 资源被加载到的浏览器上下文的名称。_blank 属性值意味着资源在新的标签页被加载。

8323 0

Django Haystack 全文检索与关键词高亮

作者：HelloGitHub-追梦人物[1] 文中所涉及的示例代码，已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的“阅读原文”即可获取博客提供 RSS 订阅应该是标配，...打开 Pipfile 文件，将依赖手动添加到 packages 板块下： [packages] django = "~=2.2" elasticsearch = ">=2,<3" 安装 elasticsearch...另外要取得 Post（文章）以显示文章的数据如标题、正文，需要从 result 的 object 属性中获取。query 变量的值即为用户搜索的关键词。...由于自定义了搜索引擎，因此在配置文件中将原来指定的 Elasticsearch2SearchEngine 替换为自定义的 Engine： # 搜索设置 HAYSTACK_CONNECTIONS = {...对于正文来说，因为内容较多，截断是合理的，但是对于标题这种较短的内容来说，截断就没有必要了。同样的，我们通过继承的方式，替换掉 haystack 的默认行为。

9743 0

HTTP2请求走私(下)

vulnerable-website.com foo bar\r\n \r\n GET /admin HTTP/1.1\r\n Host: vulnerable-website.com 在重写过程中一些前端服务器会将新的主机头附加到当前头列表的末尾..."ACCESS THELAB" Step 2：使用Burpsuite抓包并更改协议为HTTP/2，随后将路径更改为不存在的路径，比如：/x，这意味着我们正常情况下得到的都市404响应，但是如果我们一旦完成了对响应队列的毒化操作...前端和后端都同意只有一个请求，有趣的是可以让它们在报头结束的位置上产生分歧，前端将我们注入的所有内容都视为头部的一部分，因此在尾部comment=string之后，另一方面后端看到\r\n\r\n序列认为这是标头的结尾...，随后进行一个简单的检索 Step 4：在burpsuite中将协议升级为HTTP/2，同时更改请求方法为POST，添加一个任意头并使用其名称字段注入一个大的Content-Length和一个额外的搜索参数...，如下所示 #Name foo: bar\r\n Content-Length: 500\r\n \r\n search=x #Value xyz Step 5：在请求的Body中将任意字符附加到原始搜索参数

2051 0

HTML初学

相对路径分类： 1.同级目录：./ ：当前目录（即html文件所在的目录），可省略 2.上级目录：…/ ：上一级目录，如果想找再上一级的，用…/…/ 3.下级目录：文件夹/ 图片：属性介绍： 1. href 规定链接指向的页面的URL 2. target 规定在何处打开链接文档默认 target =_self（即本页面跳转）可修改为 target = _blank...当前项目的页面跳转。 2.不同网站的页面跳转 3.锚点链接定位到页面具体位置 1....给a标签的href添加定位标签的id并在前面加# 如 4.页面跳转时同时定位 1. 2....（页面跳转到test页面的part 部位）图片链接：如： <a href="http:

3.3K4 0

Python 换行符以及如何在 Python 输出时不换行

在本文中，你将学习：如何在 Python 中识别换行符如何在字符串和打印语句中使用换行符如何编写不会在字符串末尾添加换行符的打印语句我们开始吧！...✨ 换行符 Python 中的换行符是：它包含两个字符：一条反斜线字母 n 如果你在字符串中看到此字符，则表示当前行在该点结束，并在其后立即开始新行：你也可以在格式化字符串（f-strings...提示：只有文件的最后一行没有以换行符结尾。小结 Python 中的换行符为 \n。它用于指示一行文本的结尾。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/179621.html原文链接：https://javaforall.cn

13.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云