将href更改为同一页面上的锚点答案

【问题标题】：Change href to anchor on same page将href更改为同一页面上的锚点
【发布时间】：2018-08-22 04:16:26
【问题描述】：

这可能是一个简单的问题，但我想不通：我正在尝试使用 JavaScript/jQuery 将 href 更改为变量。我正在使用Bootstrap Collapse Plugin。我的代码基本上是这样的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Collapsible Panel</h2>
  <p>Click on the collapsible panel to open and close it.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Panel Body</div>
        <div class="panel-footer">Panel Footer</div>
      </div>
    </div>
  </div>
</div>

但是面板是动态创建的，在某些时候，我必须更改 id 和 href。例如：

<a href="#8d70b67c-c667-4fe3-a936-cdd0fc2a1f36">...</a>

到

<a href="#361cd655-ad54-4cd5-aeb7-a3da9553c1e9">...</a>

如果我使用 Javascript

var link = newId();
//newId is part of the plugin, but is based on the previous href
element.href = "#" + link;

html变成了

<a href="#localhost:1234/#361cd655-ad54-4cd5-aeb7-a3da9553c1e9">...</a>

（这是页面的完整地址，带有锚点）

它不再起作用了。但是像这样硬编码会起作用：

element.href = "#361cd655-ad54-4cd5-aeb7-a3da9553c1e9";

我尝试了很多东西，但总是得到相似的结果。

【问题讨论】：

newId() 返回什么？
点击功能使用的javascript是什么？
@SLaks newId() 返回类似 361cd655-ad54-4cd5-aeb7-a3da9553c1e9 的字符串
@ltjfansite 就我而言，这是由 jQuery 插件完成的。

标签： javascript jquery html href

【解决方案1】：

我可以发现 newId() 很可能涉及前面的 href 属性，因为如果你有一个锚元素：

<a href='page'></a>

虽然是相对网址，但代码

document.getElementsByTagName("a")[0].href

将返回完整的 URL（例如https://serveradmin.xyz/page）

一个可能的解决方案是在更改当前href 时，将变量设置为新值，而不是获取当前href。例如：

var linkHref = 1;
document.getElementsByTagName("a")[0].href = linkHref;
//when you next want to change it, don't get the current href, instead, use the link variable
linkHref++;
document.getElementsByTagName("a")[0].href = linkHref;

或者，您可以这样做：

function getRelativeHref(href) {
return href.replace(window.location.href + "#", "");
}

如果 href 参数是 https://stackoverflow.com/posts/51951100/edit#test，那么它将返回 #test。

【讨论】：

这似乎是我的问题。但是没有办法重用当前的href吗？使用字符串替换或类似方法
啊，您可以使用 window.location.href 获取当前页面的 url 并替换它。我将编辑我的答案。
现在可以了。我在 href 上使用了 split('#') 操作...感谢您的帮助！
好的，在我的编辑中，我使用了替换，但它也可以拆分。
虽然替换要容易一些。我也会用那个。再次感谢！

【解决方案2】：

我认为您的newId 函数存在一些问题。你需要这样的东西：

btn.addEventListener("click", () =>
  Array.from(
    document.querySelectorAll('a'),
    a => a.href = "#" + newId())
)

function newId () {
  return Math.random().toString(36); // simple random string.
};

<a href="361cd655-ad54-4cd5-aeb7-a3da9553c1e9">...</a>
<button id="btn">Change!</button>

【讨论】：