我编写了以下函数并将其放在我的 WordPress 网站标题中的脚本标记之间。
function turnShopBlue(){
var location = window.location.href;
if(location === "MY URL GOES HERE"){
var menuItem = document.getElementById("menu-item-3352");
menuItem.classList.add("current-menu-item");
//document.querySelector("#menu-item-3352").addClass("current-menu-item");
}
}
turnShopBlue();
但由于某种原因该函数无法运行。 每次我访问在“我的 URL 在这里”中选择的 URL(页面)时,不会添加当前菜单项类。我错过了什么?
我已经尝试过三重 === 和双重 ==,但没有成功。
编辑解决方案:
我的错误是我将脚本放在了 header 中,这里的问题是脚本在整个 DOM 渲染之前运行。所以我实例化的很多变量没有好的值。 通过在header中加载脚本解决了问题;
另外,我必须把它放在 jQuery document ready 中。函数在页面加载时自动加载它。
最佳答案
始终将 Javascript 代码放在 body
标记的末尾(页脚)。这样,您的所有 HTML 都将在任何 Javascript 执行之前被解析,此外,您的外部脚本也必须放置在那里,以提高页面的加载性能。
<html>
<body>
<tag-name id='menu-item-3352'></tag-name>
<script>
function turnShopBlue() {
var location = window.location.href;
if (location === "MY URL GOES HERE") {
var menuItem = document.getElementById("menu-item-3352");
menuItem.classList.add("current-menu-item");
//document.querySelector("#menu-item-3352").addClass("current-menu-item");
}
}
turnShopBlue();
</script>
<script external Javascript resources></script>
<script external Javascript resources></script>
</body>
</html>
资源
关于javascript - 无法让 JavaScript 函数运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48695506/