Question

我正在使用Wordpress网站，我正在构建导航栏。我要添加的功能之一是，如果您在某个页面上，导航栏中的选项将以粗体显示，这是您正在访问的网站的部分。

我正在尝试使用JavaScript实现这一点，因为我没有PHP的工作知识：

var current_page = document.URL;
var current_option_id="";
if(current_page==="some-url"){
  current_option_id="menu-item-34";
}
document.getElementById(current_option_id).getElementsByTagName("A")[0].style.fontWeight="bold";

基本上，我的代码会确定我们所在的页面，并将正确的菜单选项ID分配给current_option变量。然后，脚本将尝试选择正确的菜单选项，选择该菜单选项中的链接，并更改其样式。

这个脚本的问题是它根本不起作用，生成一个无法选择HTML元素的错误; document.getElementById(current_option);返回null。然而，当我在控制台中执行此操作时，它工作正常，并且样式已正确更改。为什么是这样？我知道current_option变量具有正确的值，但是当脚本尝试选择要更改的元素时脚本失败。

非常感谢任何建议和帮助。如果你知道如何在PHP中使用与Wordpress很好地集成的东西，请分享（并解释你的代码是如何工作的！）。如果我打破了任何StackOverflow规则，我很抱歉。

Answer 1

很难说没有看到你的代码，但是在你的整个页面加载之前你的脚本是否有可能被执行（或者更确切地说，在id为#menu-item-34的元素之前被添加到DOM）？

尝试将脚本包装在函数中，然后将该函数设置为页面的onload处理程序：

window.onload = function() {
    /* code goes here */
};

脚本在浏览器控制台中运行良好，但不在线

1 个答案: