用Javascript隐藏Href链接

Hide A Href link with Javascript

本文关键字：链接 Href 隐藏 Javascript      更新时间：2023-09-26

我有以下HTML 

<li class="navUser-item navUser-item--account">
     <a class="navUser-action" href="/login.php">Login</a> 
     <span class="navUser-or">or</span> // Hide this
     <a class="navUser-action" href="/login.php?action=create_account">Sign Up</a>  // Hide this
</li>

我试图隐藏最后ahref和使用Javascript的span标签。我似乎不能像预期的那样工作，我尝试了以下方法:

我希望我可以扩展这个来寻找一个给定的Href，如果它有这样的价值，即创建帐户，然后隐藏它，但没有这样的运气。

var litag = document.getElementsByClassName('navUser-item navUser-item--account'), i;
for (i = 0; i < litag.length; i += 1) {
   litag[i].style.display = 'none';
}

然后我尝试了以下操作:

document.getElementsByClassName('navUser-item navUser-item--account a:nth-last-child(2)')[0].style.visibility = 'hidden';

试图找到第二个a，但没有工作，有人能告诉我如何隐藏span和最后一个href吗?

您可以这样使用querySelector 

var link = document.querySelector('a[href="/login.php?action=create_account"]');
link.style.display = 'none';
https://jsfiddle.net/mtinra/nsznwbgk/

编辑:或使用querySelectorAll同时选择span和

var myEl = document.querySelectorAll('.navUser-item > span, a[href="/login.php?action=create_account"]');
for (var el of myEl){
    el.style.display = 'none';
}

假设你只有一个导航菜单(我选择第一个元素与类名称navUser-item在这里var childnodes = mainNav[0].childNodes;)，你可以这样做:

var mainNav = document.getElementsByClassName('navUser-item');
var childnodes = mainNav[0].childNodes;
for (i = 0; i < childnodes.length; i += 1) {
  if (childnodes[i].className && childnodes[i].className.match('navUser-action')) {
    if (childnodes[i].href && childnodes[i].href.indexOf('create_account') !== -1) {
      childnodes[i].style.display = 'none';
    }
  } else if (childnodes[i].className && childnodes[i].className.match('navUser-or')) {
    childnodes[i].style.display = 'none';
  }
}
<li class="navUser-item navUser-item--account">
  <a class="navUser-action" href="/login.php">Login</a>
  <span class="navUser-or">or</span>
  <a class="navUser-action" href="/login.php?action=create_account">Sign Up</a>
</li>

我通常发现更改类并使用CSS切换项的显示效果更好。

var links = document.getElementById('link-list').children;
for (var i = 0; i < links.length; i++) {
  if (links[i].className.match(/(?:^|'s)navUser-register(?!'S)/)) {
    console.log(links[i]);
    links[i].className = links[i].className.match(/show/) ?
      links[i].className.replace(/show/, 'hide') :
      links[i].className.replace(/hide/, 'show');
  }
}
.hide {
  display: none;
}
.show {
  display: inline-block;
}
<li id="link-list" class="navUser-item navUser-item--account">
  <a class="navUser-action" href="/login.php">Login</a> 
  <span class="navUser-or navUser-register show">or</span>
  <a class="navUser-action navUser-register show" href="/login.php?action=create_account">Sign Up</a>
</li>

EDIT:您还可以将所需的元素包围在div标记中，并根据当前页面设置其显示属性。在我看来，这是最简单的方法。<div id="register-page" class="show"> ... elements ... </div>你的JavaScript部分将只包括通过这个ID搜索元素并将它的类从show切换到hide。var div = document.getElementById('register-page') div.className.match(/show/) ? div.className.replace(/show/, 'hide') : div.replace(/hide/, 'show');

相关文章：