如何在加载时添加活动类，使用javascript中的href？
如何在加载时添加活动类，使用javascript中的href？
提问于 2018-02-27 10:48:24
我是，在单击上添加活动类，这将使单击的li项目看起来是选中的。在用户单击该页面后，将重新加载该页面，因此您可以看到该单击有效，但是重新加载后的不再可见。我正在使用location.href。这样做的目的是检查当前页面href是否可以在li的子元素中找到。如果是，则应该附加active类。以下是代码：
function codeAddress() {
var loc = location.href;
var locNavs = document.getElementsByClassName("localLi").children;
//window.alert(locNavs[0].class);
for (var i = 0; i < locNavs.length; i++) {
if (locNavs[i].location.href == loc) {
locNavs[i].className += "active";
}
}
}
window.onload = codeAddress;<ul id="menu-develop_menu" class="nav-menu">
<li id="menu-item-130" class="localLi menu-item menu-item-type-post_type menu-item-object-page
menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
</li>
</ul>
我不想使用本地存储或其他什么东西，但这不是working.And --我不完全理解jQuery，所以需要JavaScript。
如何在重新加载后保留依赖于href的高光类？
回答 2
Stack Overflow用户
发布于 2018-02-27 11:52:13
首先，您需要包含一个空格或使用另一个方法来添加类：
locNavs[i].className += " active";或
locNavs[i].classList.add("active"); //polyfill available for older browsers注意:您的href必须与此方法匹配，可能有更好的方法，例如在已知元素(如data-current="mycurrent" )上使用<ul id="menu-develop_menu" class="nav-menu">属性。
现在，给定您想要检查子元素href属性的所有内容。
function codeAddress() {
var loc = location.href;
var locNavs = document.getElementsByClassName("localLi");
//window.alert(locNavs[0].class);
for (var i = 0; i < locNavs.length; i++) {
if (locNavs[i].getElementsByTagName('a')[0].getAttribute("href") == loc) {
locNavs[i].className += " active";
}
}
}
window.onload = codeAddress;<ul id="menu-develop_menu" class="nav-menu">
<li id="menu-item-130" class="localLi menu-item menu-item-type-post_type menu-item-object-page
menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
</li>
</ul>
有鉴于此，这似乎是一种“脆弱”的做法。
检验概念
var testhref = "http://xxxxxx/dev/get/";
function codeAddress() {
var loc = testhref; // location.href;
var locNavs = document.getElementsByClassName("localLi");
for (var i = 0; i < locNavs.length; i++) {
if (locNavs[i].getElementsByTagName('a')[0].getAttribute("href") == loc) {
locNavs[i].className += " active";
}
}
}
window.onload = codeAddress;.active {
border: solid lime 2px;
}<ul class="nav-menu">
<li class="localLi menu-item menu-item-type-post_type menu-item-object-page menu-item-130"><a href="http://walter/dev/get/">walter</a>
</li>
<li class="localLi menu-item menu-item-type-post_type menu-item-object-page menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
</li>
<li class="localLi menu-item menu-item-type-post_type menu-item-object-page menu-item-130"><a href="http://notmedude/dev/get/">notme</a>
</li>
</ul>
Stack Overflow用户
发布于 2018-02-27 11:56:49
function codeAddress() {
var loc = "http://xxxxxx/dev/get/";
var locNavs = document.getElementsByClassName("localLi")[0].children;
window.alert(locNavs.length);
for (var i = 0; i < locNavs.length; i++) {
if (locNavs[i].getAttribute("href") == loc) {
console.log(locNavs[i])
locNavs[i].className += "active";
}
}
}
window.onload = codeAddress;.active{
color:green;
}<ul id="menu-develop_menu" class="nav-menu">
<li id="menu-item-130" class="localLi menu-item menu-item-type-post_type menu-item-object-page
menu-item-130"><a href="http://xxxxxx/dev/get/">xxx</a>
</li>
</ul>
此代码将用于更改锚标记的颜色。
function codeAddress() {
var loc = "http://xxxxxx/dev/get/";
var locNavs = document.getElementsByClassName("localLi")[0].children;
window.alert(locNavs.length);
for (var i = 0; i < locNavs.length; i++) {
console.log(1)
if (locNavs[i].getAttribute("href") == loc) {
console.log(locNavs[i])
locNavs[i].className += "active";
}
}
}
window.onload = codeAddress;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49006834
复制相关文章
相似问题
腾讯云开发者
