隐藏基于 href 的锚标签 URL

Question

我想知道是否有可能隐藏引用特定 URL 的锚标记。我知道可以使用 JavaScript:

这样基于 id 隐藏

document.getElementById('someID').style.display = 'none';

<a href="#" id="someID" style="display: none">Check</a>

但是假设我想根据 URL 示例隐藏所有锚标记：www.example.com

<a href="www.example.com" id="someID" style="display: none">Check</a>
<a href="www.example2.com" id="someID" style="display: none">Check</a>

我想隐藏第一个锚标签，而不是第二个引用 example2.com

纯 JavaScript 而不是 jQuery 是否可行？

Answer 1

您可以使用 document.querySelector 到 select bu 属性值，例如 this.I 没有使用 jquery，仅使用 javascript。

document.querySelector("[href='www.example.com']").style.display = 'none';

<a href="www.example.com" id="someID" style="display:block">Check</a>
<a href="www.example2.com" id="someID" style="display:block">Check</a>

Answer 2

简单地遍历所有锚元素，然后检查它们的href：

var anchors = document.getElementsByTagName('a');

for (var i = 0; i < anchors.length; i++) {
  if (anchors[i].href == 'https://example.com/') {
    anchors[i].style.display = 'none';
  }
}

<a href="https://example.com/" id="someID">Check</a>
<a href="https://example2.com/" id="someID">Check</a>

Answer 3

你可以做条件

var url = document.getElementsByTagName('a');

if (url.href = "www.example.com")
{
url.style.display = none;
}

这不是确切的代码。我为您提供了示例。请尝试一下并告诉我。它是单身的。如果你有很多标签然后循环所有这些

Answer 4

您可以使用 javascript 来完成这项工作。使用 querySelector 获取具有相同 id 的所有元素。然后循环 ids 并比较 href link 值。

<script>
var elements = document.querySelectorAll("[id='someID']");
for(var i = 0; i < elements.length; i++) {
  if (elements[i].getAttribute("href") === "www.example.com") {
    elements[i].style.display='none';
  }
}
</script>

Working fiddle link

隐藏基于 href 的锚标签 URL

Hide Anchor tag based on href URL

html

javascript

anchor