我是一个网站开发新手，所以我想在这件事上寻求一些帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="../assets/css/styles.css"/>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder"></div>
<!--end of Navigation bar-->
</body>
<script src="../assets/js/navigation_bar.js" type="text/javascript", locator="about"></script>
</html>它调用此处提供的navigation_bar.js脚本
locator = document.currentScript.getAttribute('locator');
function changeActiveElement(element_id){
console.log("Called");
nav_element = document.getElementById("navigation");
for (i = 0; i < nav_element.length; i++) {
console.log(nav_element[i].id)
if(nav_element[i].id == element_id) document.getElementById(element_id).className = "active-nav-link";
else document.getElementById(element_id).className = "nav-link";
}
}
$(function()
{$("#nav-placeholder").load("/assets/html/nav.html", function(){
changeActiveElement(locator);
});}
);而nav.html文件位于：
<nav>
<h1><a href="index.html" class="nav-link-home">Some name</a></h1>
<ul id="navigation" class="navigation">
<li><a id="about" href="/pages/about.html" class="nav-link">About</a></li>
<li><a id="compt" href="#compt" class="nav-link">Competences</a></li>
<li><a id="projects" href="#projects" class="nav-link">Projects</a></li>
<li><a id="contact" href="#contact" class="nav-link">Contact</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>该代码片段的作用域是更改navigation元素中列出的a标记的类。导航栏通过$("#nav-placeholder").load("/assets/html/nav.html")正确加载，但changeActiveElement函数从未通过回调执行。
有人能解释一下我的这种行为吗？
1条答案
按热度按时间mfuanj7w1#
我测试了你的代码，除了
nav_element不是一个列表，因此nav_element.length抛出了一个错误之外，一切都正常。你可以使用document.querySelectorAll("#navigation");，它返回所有选定元素的节点列表。尽管如此，我不建议按id对元素执行for循环。使用类来选择元素。id只用于一个元素。