[英]Hide A Href link with Javascript
我有以下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>
我正在尝试使用Javascript隐藏最后的ahref和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
选择跨度和
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>
编辑:您还可以在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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.