Javascript 从子元素中获取剥离的 href 值（没有 jquery）分配活动 class

Question

想法：我想添加 class="active" 到 li 元素，当特定 link 被点击时等于 href 和 url。

问题：我无法 select 嵌套在 ul li 中的 href 值。 CSS 可能会提前加载样式。注意：html 被注入 php.

代码：

window.onload = function () {
 
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

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

在您的代码中 for loop length 使用 linkNow 代替 link
如果有条件试试这个(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 2

有很多方法可以实现，一种是使用选择器直接获取元素，例如

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;

它与几乎所有浏览器都兼容，然后遍历它们以寻找合适的 href 值。

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>

Javascript 从子元素中获取剥离的 href 值（没有 jquery）分配活动 class

Javascript getting stripped href values from children elements (without jquery) assign active class

html

javascript

children

nested

href