JS控制a标签显示的文本文字的改变,但不产生链接到其他页:如默认的文本是“修改”,点击后变为“关闭”

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS控制a标签显示的文本文字的改变,但不产生链接到其他页:如默认的文本是“修改”,点击后变为“关闭”相关的知识,希望对你有一定的参考价值。

但是点“关闭”时,还得变为"修改",依此循环
如这样的

参考技术A <a href="javascript:this.innerhtml=(this.innerHTML=='关闭'?'修改':'关闭');void(0);">关闭</a> 参考技术B 用个省心的办法吧,设置两个div,一个隐藏一个显示,css采用相同的,基本看不出来刷新;
或者你就在js里更新a标签里面的属性值,代码不如上一个方法清晰
参考技术C document.getElementById("a").onclick=
function()
document.getElementById("a").innerHTML="close";
//增加判断

已部署的页面加载但不显示--用gatsby构建。

我把我做的一个gatsby博客部署到github页面。第一页链接到一篇博客文章。点击链接时,没有任何显示。但如果我手动输入网址(与链接的网址相同),我看到页面半秒后就消失在空白页。

有用的信息

  • 网络标签中的所有内容都是状态码200
  • HTML是在get请求中返回的,它在响应中可见。
  • 头部标签在页面上是正确的,而正文标签缺少了html标签
  • 无控制台错误
  • 在开发服务器(本地主机)上完美工作
  • 域名托管在domain.com
  • 使用 createpage gatsby 插件生成文章页。
  • 当我在netlify上部署到一个随机的网址时,它可以工作,所以可能与我的域名或gh-pages部署有关。

链接到问题页面www.ragith.comblogblogwhy-gatsby

链接到github repo

答案

在看了你的GitHub代码后,我认为你这里有问题。(错误的URL。/blog/blog/why-gatsby),还有你的主代码与gh-pages的代码不匹配(我知道这是从gatsby build生成的文件,但其他东西)。另外,为什么你要在index.js组件中创建一个静态查询?你可以用一个普通的页面查询来做。

你的gatsby网站从 https:/www.ragith.comblog 所以你才会出现这样的问题。当Gatsby查看页面时,只有。blog.js 里面的。

pagesblog.js

链接问题

<a class="article-card-link" href="/blog/blog/why-gatsby"><section><article><h2 class="article-title">Why Gatsby js ?</h2><p class="article-date">May 09, 2020</p><p class="article-excerpt">In a world with so many JavaScript frameworks such as React, Vue, heck even Next, why Gatsby? The short answer is, none of those frameworks are the target market of Gatsby. Gatsby is a static website generator. Great! Wait, who cares? Well a lot of my clients and so will yours…</p>READ MORE</article></section></a>

以上是关于JS控制a标签显示的文本文字的改变,但不产生链接到其他页:如默认的文本是“修改”,点击后变为“关闭”的主要内容,如果未能解决你的问题,请参考以下文章

如何用js控制img中src图片路径改变

jquery HTML标签输出,但不改变原有的内容

Next.js 加载 <script> 标签,但不执行它们

delphi中如何把有规律的文本文字放入STRINGGRID中的每个单元格中

HTML a标签

js 根据<a>标签的内容来判断链接内容