Javascript获取从子元素（无jquery）剥离href值分配活动类

Question

想法：我想添加class =“active”到li元素，当特定的链接被点击，这是相当于href和url。

问题：我无法选择嵌套在ul里面的href值。 CSS可能会尽早加载样式。 注意：html被注入了php。

代码：

window.onload = function() { 
 
\t 
 
var curURL = window.location.href.split("/").pop(); //Outputs the current page url ex index.php 
 

 
var linkNow = document.getElementsByClassName("topnav").getElementsByTagName("a").href;//Nesting this does not work but how can it be achieved? 
 

 

 
//Loop check which curURL matches the href value, true->assign active class 
 

 
for (var i = 0; i < link.length; i++) { 
 
    if (curURL == linkNow[i]){ 
 
     linkNow.addClass("active"); 
 
     break; 
 
    } 
 
     
 
} 
 

 
//As soon as the a element has the class="active" the navbar color will change 
 
}

<ul class='topnav'> 
 
    <li><a href='index.php'>Home</a></li> 
 
    <li><a href='news.php'>News</a></li> 
 
    <li><a href='showcase.php'>Showcase</a></li> 
 
    <li class='icon'> 
 
    <a href='javascript:void(0);' onclick='myFunction()'>&#9000;</a><!-- responsive icon--> 
 
    </li> 
 
</ul>

Answer 1

有多种方式去做，一个是使用直接获取元素的选择器，例如

window.onload = function() { 
 
    var href = 'index.php'; 
 
    var link = document.querySelector('a[href="' + href + '"]'); 
 
    link.parentNode.className = 'active'; 
 
}

.active { 
 
    background-color: red; 
 
}

<ul class='topnav'> 
 
    <li><a href='index.php'>Home</a></li> 
 
    <li><a href='news.php'>News</a></li> 
 
    <li><a href='showcase.php'>Showcase</a></li> 
 
</ul>

为了与旧的浏览器兼容，你也可以使用更广泛的选择，如：

var links = document.querySelectorAll('ul a'); 

甚至：

var links = document.links; 

这是兼容几乎每个浏览器都有，然后循环播放r他们寻找适当的价值。

Answer 2

与queryselectorAll()简单的使用。这样document.querySelectorAll('.topnav li a')

1. 在你的代码for loop length使用linkNow代替link
2. 而与之搭配的适用，如果条件试试这个(curURL == linkNow[i].href)

window.onload = function() { 
 

 
    var curURL = window.location.href 
 
    var linkNow = document.querySelectorAll('.topnav li a') 
 
    for (var i = 0; i < linkNow.length; i++) { 
 
    if (curURL == linkNow[i].href) { 
 
     linkNow[i].classList.add("active"); 
 
     console.log(linkNow[i]) 
 
     break; 
 
    } 
 
    else{ 
 
    linkNow[i].classList.remove('active') 
 
    
 
    } 
 

 
    } 
 
}

.active{ 
 
color:red; 
 
}

<ul class='topnav'> 
 
    <li><a href='index.php'>Home</a></li> 
 
    <li><a href='news.php'>News</a></li> 
 
    <li><a href='js'>Its for test only</a></li> 
 
    
 
    <li><a href='showcase.php'>Showcase</a></li> 
 
    <li class='icon'> 
 
    <a href='javascript:void(0);' onclick='myFunction()'>&#9000;</a> 
 
    <!-- responsive icon--> 
 
    </li> 
 
</ul>

Answer 3

这里的关键错误是getElementsByClassName返回数组。请注意功能名称中的s？

所以，如果你想使用这个功能，记得循环遍历结果。我只是使用[0]作为简单的例子。

window.onload = function() { 
 
    var curURL = 'news.php'; 
 

 
    var lis = document.getElementsByClassName("topnav")[0].getElementsByTagName("li"); 
 

 
    for (var i = 0; i < lis.length; i++) { 
 
    var a = lis[i].getElementsByTagName("a")[0]; 
 
    if (a.getAttribute("href") === curURL) { // using .getAttribute() to get raw value instead of full url 
 
     //lis[i].classList.add("active"); //use this instead if you want to add class to <li> 
 
     a.classList.add("active"); // be careful .addClass() is an jquery function 
 
     break; 
 
    } 
 

 
    } 
 
}

li.active { 
 
    background: red 
 
} 
 

 
a.active{ 
 
    color: yellow 
 
}

<ul class='topnav'> 
 
    <li><a href='index.php'>Home</a></li> 
 
    <li><a href='news.php'>News</a></li> 
 
    <li><a href='showcase.php'>Showcase</a></li> 
 
    <li class='icon'> 
 
    <a href='javascript:void(0);' onclick='myFunction()'>&#9000;</a> 
 
    <!-- responsive icon--> 
 
    </li> 
 
</ul>