[英]Hide A Href link with Javascript
I have the following HTML 我有以下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>
I'm trying to hide the last ahref and the span tag using Javascript. 我正在尝试使用Javascript隐藏最后的ahref和span标签。 I can't seem to get this to work as expected, I have tried the following:
我似乎无法达到预期的效果,我尝试了以下方法:
I was hoping I could extend this to look for a given Href and if its of such value ie create account then hide it however no such luck. 我希望我可以扩展它以查找给定的Href,如果它具有这样的价值,即创建帐户,然后将其隐藏,但是没有这种运气。
var litag = document.getElementsByClassName('navUser-item navUser-item--account'), i;
for (i = 0; i < litag.length; i += 1) {
litag[i].style.display = 'none';
}
I then tried the following: 然后,我尝试了以下操作:
document.getElementsByClassName('navUser-item navUser-item--account a:nth-last-child(2)')[0].style.visibility = 'hidden';
tried finding the second a and yet didn't work, can someone shed some light into how I go about hiding the span and the last a href? 试图找到第二个a但仍然没有用,有人可以阐明我如何隐藏span和最后一个href吗?
You can use the querySelector
like this 您可以像这样使用
querySelector
var link = document.querySelector('a[href="/login.php?action=create_account"]');
link.style.display = 'none';
https://jsfiddle.net/mtinra/nsznwbgk/ https://jsfiddle.net/mtinra/nsznwbgk/
Edit: or use querySelectorAll
to select both span and a 编辑:或使用
querySelectorAll
选择跨度和
var myEl = document.querySelectorAll('.navUser-item > span, a[href="/login.php?action=create_account"]');
for (var el of myEl){
el.style.display = 'none';
}
Supposing you have only one navigation menu (I'm choosing the first element with class name navUser-item
here var childnodes = mainNav[0].childNodes;
) you could do something like this: 假设您只有一个导航菜单(我在这里选择类名称为
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>
I generally find it better to change classes and use CSS for toggling display of items. 我通常发现最好更改类并使用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: You could also surround desired elements in a div tag and set it's display property depending on the current page. 编辑:您还可以在div标签中包围所需的元素,并根据当前页面设置其显示属性。 In my opinion this would be the easiest way.
我认为这将是最简单的方法。
<div id="register-page" class="show"> ... elements ... </div>
And your JavaScript part would include just a search for element by this ID and toggling it's class from show to hide. <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.