javascript - 设置从 jQuery '.load()' 方法加载的链接的颜色

Question

在我的index.html 文件中，我有以下代码:

<div id="navbar"></div>

<script type="text/javascript">
    $(document).ready(function() {
        $('head').append('<link rel="stylesheet" type="text/css" href="stylesheets/navigation.css">');
        $("#navbar").load("scripts/navigationbar.html");
    });
</script>

navigationbar.html 文件是:

<nav>
    <div>
        <ul>
            <li><a id="nav-page-1" href="page1.html">Page 1</a></li>
            <li><a id="nav-page-2" href="page2.html">Page 2</a></li>
        </ul>
    </div>
</nav>

标记和样式表加载并正确显示，但我想要做的是将 jQuery 代码复制并粘贴到每个页面中。但是，不同之处在于，在第一页上，颜色或“第 1 页”应该与栏上的其他链接不同，而在第二页上，“第 2 页”的颜色应该是不同的颜色，等等。我怎么能用上面的代码实现这个吗？

我尝试过:

document.getElementById("nav-page-1").color = "#ff0000";

但这没有用。有什么建议吗？

Answer 1

添加 HTML 后，您需要在回调中选择元素。

$("#navbar").load("scripts/navigationbar.html", function () {
  document.getElementById("nav-page-1").style.color = "#ff0000";
});

根据您提供的代码，您可能试图在元素存在之前选择该元素。 .load() 方法是异步的，因此应在回调中添加逻辑，以便在事件完成时触发该逻辑。附带说明一下，您还需要访问 style 对象上的 color 属性(即 element.style.color 而不是 >元素.颜色)。